JavaScript-HTML-CSS Day15 Notes

1、响应式网页的概念理解

简单来说：就是只用一套代码，就能够适应所有屏幕设备(小屏幕、中屏幕、大屏幕etc)

 

 

2、注意min-width, max-width

注意书写顺序：

min-width: 从上往下，从小到大去书写；

max-width: 从上往下，从大到小去书写；

 

 

3、媒体查询——完整写法

 

 

4. 写CSS要注意的点

如果CSS少，咱就还在style标签或者是css文件的里面@media标签里写就行，但如果要生效的样式多，就写在对应的CSS文件中，

<link></link>标签里面也是允许写媒体查询的。所以真实的工作中，应该做一些评估。

看对应的CSS是多还是少，如果少就用@media的写法，如果多就用单独CSS文件link写media属性的写法，【关键词和媒体类型 可以省略，媒体特性不能省，而且要加括号(媒体特性)，否则link标签的引入，CSS都不会生效】

如下图所示：

 

 

5. Bootstrap框架的简要理解

 

6. Bootstrap如何使用？

 

 

7. Bootstrap栅格系统的直观感受

 

把这些Breakpoint和对应的Dimensions对应的参数要记住

 以上图的例子说明：

一行排4个盒子，则每个盒子占3份，假设Breakpoint选择lg, 则Class prefix应该填: .col-lg-3

其他的这些后缀也是以此类推。

 

8. CSS类名提示的插件，名称有些长，要记住。

IntelliSense for CSS class names in HTML 

 

 

 9. Bootstrap常用的全局样式，记忆和掌握。

去官方文档去学习查看，

 

10. Bootstrap组件使用的步骤

 

 

11. Bootstrap字体图标使用步骤

 

 12. 如下优化能力，需要好好实践研究下

 

 

13. 如下代码，为什么要加上row标签？不加会如何

<body>
  <!-- 
    视口宽度大于等于1200px，一行排4个盒子 → 3
    视口宽度大于等于768px，一行排2个盒子
    视口宽度大于等于576px，一行排1个盒子
   -->
   <!-- 版心 → row → 子级 -->
   <div class="container">
    <div class="row">
      <div class="col-xl-3 col-md-6 col-sm-12">1</div>
      <div class="col-xl-3 col-md-6 col-sm-12">2</div>
      <div class="col-xl-3 col-md-6 col-sm-12">3</div>
      <div class="col-xl-3 col-md-6 col-sm-12">4</div>
    </div>
   </div>
</body>

在 Bootstrap 中，row 标签是必要的，因为它用于确保网格系统中的列正确对齐，并保持一致的布局规则。具体来说，row 标签的主要作用如下：

  1. 清除浮动 (clearfix)：Bootstrap 的网格系统依赖于浮动来实现列的排列。当列 (col-*) 被放在一行里时，它们使用浮动的方式进行排列，而 row 类通过 clearfix 机制清除浮动，避免后续布局被破坏。如果你不使用 row，列可能会超出容器并且布局会混乱。

  2. 确保列之间有正确的间距 (gutter)：在 row 标签内部，Bootstrap 自动为列之间设置了水平间距（称为 gutter）。如果不使用 row，这些间距不会正确应用，列可能紧贴在一起或出现其他布局问题。

  3. 水平对齐：row 标签还帮助确保列在同一水平线上排列，保证在不同屏幕宽度下网格系统的响应性和一致性。

如果没有 row，可能出现的问题：

  • 列会错位，无法在同一行内水平排列。
  • 缺少预定义的间距，导致列贴得太紧或产生不规则的布局。
  • 响应式布局失效，在不同的设备上显示效果可能不一致。

 

14. tertiary 这个单词的含义是什么？在前端开发中，它的具体含义又是什么？

Tertiary 是一个英语单词，源自拉丁语，表示“第三的”或“第三等级的”。它通常用于描述顺序、阶段、重要性等方面的“第三个”。在不同的上下文中，tertiary 可以有不同的含义：

一般含义：

  1. 顺序：表示第三位、第三层或第三等级的事物。例如，初级（primary）、次级（secondary）、三级（tertiary）。
  2. 地质学：在地质学中，Tertiary 是指第三纪地质时代。
  3. 医学：在医学中，tertiary 可以指某种疾病的第三阶段。

在前端开发中的含义：

在前端开发和设计中，tertiary 通常与颜色和按钮的样式相关，特指“三级”或“次要”的用户界面元素。这种用法主要体现在设计系统中，特别是在按钮、颜色和样式层次的定义上。具体解释如下：

  1. Tertiary button（三级按钮）： 在设计中，按钮通常根据优先级分为 primary（主要按钮）、secondary（次要按钮）和 tertiary（三级按钮）。Tertiary button 是优先级最低的按钮，通常用于不那么重要的交互场景。

    • Primary button：是主要操作按钮，通常颜色最显眼，吸引用户注意，执行核心操作。
    • Secondary button：是次要操作按钮，通常颜色不如 primary 突出，执行辅助操作。
    • Tertiary button：是三级按钮，颜色更不显眼，通常为无边框或透明样式，用于更不重要的操作。

    例如，在电商网站中，"添加到购物车" 是 primary 操作，而 "更多信息" 可能是 tertiary 操作。

  2. Tertiary color（三级颜色）： 在前端设计系统中，tertiary color 是用来定义颜色层次中的第三等级颜色。Primary color 是主要的品牌色，secondary color 是次要的辅助色，tertiary color 则通常用于进一步装饰或提供额外的视觉层次

示例：

<button class="btn-primary">Submit</button>
<button class="btn-secondary">Cancel</button>
<button class="btn-tertiary">More Info</button>

在上面的代码中，btn-tertiary 代表了一个三级按钮，通常样式最简单，显示为文本或最小的视觉强调。

总结：

在前端开发中，tertiary 通常指代与用户界面中优先级最低的设计元素，例如三级按钮或三级颜色，用于提供不重要的交互或视觉元素。

 

posted @ 2024-10-01 23:47  AlphaGeek  阅读(24)  评论(0)    收藏  举报