图片 8

如何使用SASS编写可重用的CSS,前端框架

前端框架 Bootstrap 4.4.0 发布了,以下是更新内容:

时间: 2019-12-07阅读: 16标签: sass

全局 CSS 样式

设置全局 CSS 样式;基本的 HTML 元素均可以通过 class
设置样式并得到增强效果;还有先进的栅格系统。

  • 新的响应式 .row-cols 类,用于快速指定跨断点的列数
  • 新的 escape-svg() 函数,可简化用于表单等的嵌入式背景图像 SVG
  • 新的 add() 和 subtract() 函数,可避免 CSS 的内置 calc
    功能出现错误和零值
  • 新的 make-col-auto() mixin 使 .col-auto 类可用于自定义 HTML
  • 通过将选择器移至 [disabled],解决了 Microsoft Edge 无法拾取
    :disabled  样式的问题
  • bg-variant()、nav-divider() 和 form-control-focus() mixins 现在在 v5
    中已弃用
  • 更新了模式页脚元素(例如按钮)的间距和对齐方式,以在空间受限时自动换行
  • 表单控件验证样式更加灵活。还将 :invalid validation
    图标更新为警报,而不是 ×,以避免与清除表单字段值的浏览器功能混淆
  • 修复了数十个 CSS 和 JS 错误
  • 更新了文档以修复链接和拼写错误,改进了辅助导航的地标,并为报告潜在漏洞的指南提供了新的安全性文档

Sass
是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:

概览

深入了解 Bootstrap 底层结构的关键部分,包括我们让 web
开发变得更好、更快、更强壮的最佳实践。

更新说明:

Sass 也是Bootstrap
4运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的,而不是覆盖代码(这是大多数开发人员的定制方法)。理解Sass可以更好地理解源代码级别的工具。

HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5
文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. ...
  4. </html>

 

(文/开源中国)    

当使用CSS时,我们经常在一个全局环境设置,这样可能会错误地设置元素的样式。

移动设备优先

在 Bootstrap 2
中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap
3
中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap
是移动设备优先的
。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport
元数据标签

复制

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上,通过为视口(viewport)设置 meta
属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

复制

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

自定义CSS(即使有CSS变量)仍然是非常冗余的。CSS不是为我们今天所拥有的那种复杂的架构设计的,我们遇到了在另一个样式表中导入一个样式表的问题,这可能会导致一个非常大的样式库,没有适当的文档可能无法理解它。

排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式。分别是:

  • 为 body 元素设置 background-color: #fff;
  • 使用 @font-family-base@font-size-base 和 @line-height-base a变量作为排版的基本参数
  • 为所有链接设置了基本颜色 @link-color ,并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

在本文中,我们将重点讨论为什么预处理程序很重要,并特别强调SASS及其将规则组合在一起的能力。使用Sass为设计现代web组件提供了一种更合理的方法。

Normalize.css

为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas
Gallagher 和 Jonathan
Neal 维护的一个CSS 重置样式库。

我们还将通过演示示例来了解为什么要使用这些预处理程序,演示如何将样式划分为更小的特定组件,而不必强迫用户下载大量不需要的CSS文件。

布局容器

Bootstrap
需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding等属性的原因,这两种
容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

  1. 复制
  2. <div class="container">
  3. ...
  4. </div>

 

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

  1. 复制
  2. <div class="container-fluid">
  3. ...
  4. </div>

 

安装 sass

栅格系统

Bootstrap
提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin
用于生成更具语义的布局。

sass 的安装方式有很多种,可以查看这个地址,这里我们使用npm安装:

简介

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下
Bootstrap 栅格系统的工作原理:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100%
    宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap
    源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
  • 负值的
    margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行(row)”中包含了的“列(column)”大于
    12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,
    并且针对小屏幕设备覆盖栅格类。
    因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备
    , 并且针对小屏幕设备覆盖栅格类。
    因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

通过研究后面的实例,可以将这些原理应用到你的代码中。

npm install -g sass

媒体查询

在栅格系统中,我们在 Less 文件中使用以下媒体查询(media
query)来创建关键的分界点阈值。

  1. 复制
  2. /* 超小屏幕(手机,小于 768px) */
  3. /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
  4. /* 小屏幕(平板,大于等于 768px) */
  5. @media(min-width:@screen-sm-min){...}
  6. /* 中等屏幕(桌面显示器,大于等于 992px) */
  7. @media(min-width:@screen-md-min){...}
  8. /* 大屏幕(大桌面显示器,大于等于 1200px) */
  9. @media(min-width:@screen-lg-min){...}

 

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS
的影响限制在更小范围的屏幕大小之内。

  1. 复制
  2. @media(max-width:@screen-xs-max){...}
  3. @media(min-width:@screen-sm-min) and (max-width:@screen-sm-max){...}
  4. @media(min-width:@screen-md-min) and (max-width:@screen-md-max){...}
  5. @media(min-width:@screen-lg-min){...}

 

CSS 存在哪些问题?

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

 

超小屏幕 手机 (<768px)

小屏幕 平板 (≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

栅格系统行为

总是水平排列

开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

.container 最大宽度

None (自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px (每列左右均有 15px)

可嵌套

偏移(Offsets)

列排序

在则开始学习前端基础知识时,我们会接触到传统的
CSS,涉及到使用类或id之类的标识符来处理和操作HTML元素。

实例:从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在
” .row 内。

图片 1

 

  1. <divclass="row">
  2. <divclass="col-md-1">.col-md-1</div>
  3. <divclass="col-md-1">.col-md-1</div>
  4. <divclass="col-md-1">.col-md-1</div>
  5. <divclass="col-md-1">.col-md-1</div>
  6. <divclass="col-md-1">.col-md-1</div>
  7. <divclass="col-md-1">.col-md-1</div>
  8. <divclass="col-md-1">.col-md-1</div>
  9. <divclass="col-md-1">.col-md-1</div>
  10. <divclass="col-md-1">.col-md-1</div>
  11. <divclass="col-md-1">.col-md-1</div>
  12. <divclass="col-md-1">.col-md-1</div>
  13. <divclass="col-md-1">.col-md-1</div>
  14. </div>
  15. <divclass="row">
  16. <divclass="col-md-8">.col-md-8</div>
  17. <divclass="col-md-4">.col-md-4</div>
  18. </div>
  19. <divclass="row">
  20. <divclass="col-md-4">.col-md-4</div>
  21. <divclass="col-md-4">.col-md-4</div>
  22. <divclass="col-md-4">.col-md-4</div>
  23. </div>
  24. <divclass="row">
  25. <divclass="col-md-6">.col-md-6</div>
  26. <divclass="col-md-6">.col-md-6</div>
  27. </div>

 

 

在使用CSS的时候,我们经常需要修改样式来实现预期的要求。
组织大型样式表确实很压力。
保持类的作用域以避免意外地设置样式有时候有的很累。

实例:流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为
100% 宽度的布局。

  1. <div class="container-fluid">
  2. <div class="row">
  3. ...
  4. </div>
  5. </div>

 

即使引入了 CSS
变量以减少声明的重复,但使用预处理器仍可以解决变量的一些问题。
例如:较长的变量名。

实例:移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*和 .col-md-*。请看下面的实例,研究一下这些是如何工作的。

图片 2

 

  1. <!--Stack the columns on mobile by making one full-width and the other half-width -->
  2. <div class="row">
  3. <div class="col-xs-12 col-md-8">.col-xs-12.col-md-8</div>
  4. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  5. </div>
  6. <!--Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  7. <div class="row">
  8. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  9. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  10. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  11. </div>
  12. <!--Columns are always 50% wide, on mobile and desktop -->
  13. <div class="row">
  14. <div class="col-xs-6">.col-xs-6</div>
  15. <div class="col-xs-6">.col-xs-6</div>
  16. </div>

 

 

即使有了CSS3,我们仍然需要依赖一些技巧来设计用户界面的样式,在编写 HTML
时,嵌套和可视化层次结构样式有助于理解,但这是常规 CSS 做不到。

实例:手机、平板、桌面

在上面案例的基础上,通过使用针对平板设备的 .col-sm-* 类,我们来创建更加动态和强大的布局吧。

图片 3

  1. <divclass="row">
  2. <divclass="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  3. <divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  7. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  8. <!-- Optional: clear the XS cols if their content doesn't match in height -->
  9. <divclass="clearfix visible-xs-block"></div>
  10. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  11. </div>

 

CSS 预处理器是什么?

实例:多余的列(column)将另起一行排列

如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。

 

图片 4

 

  1. <divclass="row">
  2. <divclass="col-xs-9">.col-xs-9</div>
  3. <divclass="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  4. <divclass="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
  5. </div>

 

 

可以把预处理器看作是一个加工的机器,一端允许我们编写独特的语法,另一端,预处理器帮我们生成对应的常规的
CSS。CSS
预处理程序通常会增加一些纯CSS中不存在的特性,比如mixin、嵌套选择器、继承选择器。同时也给了我们以结构化的方式来编写样式。CSS
预处理程序有LESS,stylus,Sass,PostCSS。如前所述,本文主要关注作为预处理器的
Sass。

响应式列重置

即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix 和 响应式工具类。

图片 5

  1. <divclass="row">
  2. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  3. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  4. <!-- Add the extra clearfix for only the required viewport -->
  5. <divclass="clearfix visible-xs-block"></div>
  6. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  7. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  8. </div>

 

除了列在分界点清除响应, 您可能需要 重置偏移,
后推或前拉某个列
。请看此栅格实例。

  1. <divclass="row">
  2. <divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  3. <divclass="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  7. <divclass="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
  8. </div>

 

SASS 还是 SCSS ?

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass
的强大功能。Sass 和 SCSS 其实是同一种东西,我们平时都称之为
Sass,两者之间不同之处有以下两点:

 

1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS
是以“.scss”后缀为扩展名

列偏移

图片 6

 

  1. <divclass="row">
  2. <divclass="col-md-4">.col-md-4</div>
  3. <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  7. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  8. </div>
  9. <divclass="row">
  10. <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  11. </div>

 

2.语法书写方式不同,Sass
是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS
的语法书写和我们的 CSS 语法书写方式非常类似。

嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

图片 7

 

  1. <divclass="row">
  2. <divclass="col-sm-9">
  3. Level 1: .col-sm-9
  4. <divclass="row">
  5. <divclass="col-xs-8 col-sm-6">
  6. Level 2: .col-xs-8 .col-sm-6
  7. </div>
  8. <divclass="col-xs-4 col-sm-6">
  9. Level 2: .col-xs-4 .col-sm-6
  10. </div>
  11. </div>
  12. </div>
  13. </div>

 

 

先来看一个示例:

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

图片 8

 

  1. <divclass="row">
  2. <divclass="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  3. <divclass="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  4. </div>

 

 

Sass语法

Less mixin 和变量

除了用于快速布局的预定义栅格类,Bootstrap
还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

$font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-color

变量

通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。我们使用这些变量生成预定义的栅格类,如上所示,还有如下所示的定制
mixin。

  1. @grid-columns: 12;
  2. @grid-gutter-width: 30px;
  3. @grid-float-breakpoint: 768px;

 

Scss语法

mixin

mixin 用来和栅格变量一同使用,为每个列(column)生成语义化的 CSS 代码。

复制

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {// Then clear the floated columns
  .clearfix();@media (min-width: @screen-sm-min) {margin-left:  (@gutter / -2);margin-right: (@gutter / -2);}// Negative margin nested rows out to align the content of columns
  .row {margin-left:  (@gutter / -2);margin-right: (@gutter / -2);}}// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the small column offsets
.make-sm-column-offset(@columns) {@media (min-width: @screen-sm-min) {margin-left: percentage((@columns / @grid-columns));}}.make-sm-column-push(@columns) {@media (min-width: @screen-sm-min) {left: percentage((@columns / @grid-columns));}}.make-sm-column-pull(@columns) {@media (min-width: @screen-sm-min) {right: percentage((@columns / @grid-columns));}}// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the medium column offsets
.make-md-column-offset(@columns) {@media (min-width: @screen-md-min) {margin-left: percentage((@columns / @grid-columns));}}.make-md-column-push(@columns) {@media (min-width: @screen-md-min) {left: percentage((@columns / @grid-columns));}}.make-md-column-pull(@columns) {@media (min-width: @screen-md-min) {right: percentage((@columns / @grid-columns));}}// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the large column offsets
.make-lg-column-offset(@columns) {@media (min-width: @screen-lg-min) {margin-left: percentage((@columns / @grid-columns));}}.make-lg-column-push(@columns) {@media (min-width: @screen-lg-min) {left: percentage((@columns / @grid-columns));}}.make-lg-column-pull(@columns) {@media (min-width: @screen-lg-min) {right: percentage((@columns / @grid-columns));}}
$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}

实例展示

你可以重新修改这些变量的值,或者用默认值调用这些
mixin。下面就是一个利用默认设置生成两列布局(列之间有间隔)的案例。

复制

.wrapper {.make-row();}.content-main {.make-lg-column(8);}.content-secondary {.make-lg-column(3);.make-lg-column-offset(1);}

复制

<div class="wrapper"><div class="content-main">...</div><div class="content-secondary">...</div></div>

在上面的代码示例中,我们注意到 Sass 和 SCSS 编写样式的不同。
请注意,它们都使用$来声明变量。

排版

SCSS 中的概念嵌套和作用域

标题

HTML
中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px

复制

<h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>

在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

复制

<h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6>

当设计 HTML文件的样式时,SCSS 使我们能够在样式表中拥有相同的 HTML
视觉层次结构,这样我们就可以以一种更容易理解的方式来设计样式。例如,设计这个index.html的样式

页面主体

Bootstrap
将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于
1/2 行高(即 10px)的底部外边距(margin)。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis
mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia
odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id
elit non mi porta gravida at eget metus. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

复制

<p>...</p>
nav class = 'sidebar' ul li a /a/li /ul/nav

中心内容

通过添加 .lead 类可以让段落突出显示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Duis mollis, est non commodo luctus.

复制

<p class="lead">...</p>

CSS:

使用 Less 工具构建

variables.less 文件中定义的两个 Less
变量决定了排版尺寸:@font-size-base 和 @line-height-base。第一个变量定义了全局
font-size 基准,第二个变量是 line-height
基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、
padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。

nav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}

内联文本元素

SCSS:

Marked text

For highlighting a run of text due to its relevance in another context,
use the <mark> tag.

You can use the mark tag to highlight text.

复制

You can use the mark tag to <mark>highlight</mark> text.
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}

被删除的文本

对于被删除的文本使用 <del> 标签。

This line of text is meant to be treated as deleted text.

复制

<del>This line of text is meant to be treated as deleted text.</del>

从上面的 CSS 代码示例可以看出,我们能够推断 HTML
文件的结构,同时保持实现的简短。这样做的另一个好处是,它有助于避免拼写错误,而且还可以看到,我们已经确定了一些规则的作用域,因此这些样式只用于nav。

无用文本

对于没用的文本使用 <s> 标签。

This line of text is meant to be treated as no longer accurate.

复制

<s>This line of text is meant to be treated as no longer accurate.</s>

后代样式规则适用于 SCSS,例如:

插入文本

额外插入的文本使用 <ins> 标签。

This line of text is meant to be treated as an
addition to the document.

复制

<ins>This line of text is meant to be treated as an addition to the document.</ins>
.container{ .left-area{ ... }}

带下划线的文本

为文本添加下划线,使用 <u> 标签。

This
line of text will render as underlined

复制

<u>This line of text will render as underlined</u>

利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。

这意味着,具有class =
“left-area”的container类的所有后代都将受到规则的影响。基本的CSS
选择器仍然适用于 SCSS,比如:

小号文本

对于不需要强调的inline或block类型的文本,使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的
85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。

This line of text is meant to be treated as fine print.

复制

<small>This line of text is meant to be treated as fine print.</small>

选择器

着重

通过增加 font-weight 值强调一段文本。

The following snippet of text is rendered as bold text.

复制

<strong>rendered as bold text</strong>
.container{  .left-area{ ... }}

斜体

用斜体强调一段文本。

The following snippet of text is rendered as italicized text.

复制

<em>rendered as italicized text</em>

现在,只有类为container的直接子类才会获得样式。

Alternate elements

在 HTML5
中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语,不带有任何着重的意味;而 <i> 标签主要用于发言、技术词汇等。

css 中“”是 css3 中特有的选择器,A B表示选择 A 元素的所有子B元素,与A
B不同的是,A B选择所有后代元素,为A B只选择一代。

对齐

通过文本对齐类,可以简单方便的将文字重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

复制

<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p>

父选择器()

改变大小写

通过这几个类可以改变文本的大小写。

lowercased text.

UPPERCASED TEXT.

Capitalized Text.

复制

<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>

如果我们想通过添加一个类来修改一个类,我们可以使用父选择器,它主要用于添加辅助样式改变元素样式的情况,这也会起到修饰符的作用,在
scss中表示自身的意思。

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML
的 <abbr> 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见),
但需要包含 title 属性。

.container{ .right-area{ background-color : #0000 }}

基本缩略语

An abbreviation of the word attribute is attr.

复制

<abbr title="attribute">attr</abbr>

上述代码等同于

首字母缩略语

为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。

HTML is the best thing since sliced bread.

复制

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
.container.right-area { background-color : #0000}

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

复制

<address><strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> (123) 456-7890
</address><address><strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a></address>

我们还可以使用父选择器将角色限定在另一个类中,就像这样

引用

在你的文档中引用其他来源的内容。

在代码示例中,由于父选择器的原因,color:#fff只适用于.theme-dark类。

默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用,我们建议用 <p> 标签。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.

复制

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>

变量

多种引用样式

对于标准样式的 <blockquote>,可以通过几个简单的变体就能改变风格和内容。

通常,在 CSS 中,我们通过使用@import将不同的样式表链接到主 CSS
中,这意味着必须下载额外的CSS文件。

命名来源

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.

Someone famous in Source Title

复制

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>

如果有一种方法可以使用 SCSS 将所有这些输入解析为一个 CSS
文件,该怎么办。 CSS 中变量的概念来自 JS 方法。

另一种展示风格

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.

Someone famous in Source Title

复制

<blockquote class="blockquote-reverse">
  ...
</blockquote>

请注意,SCSS中的@import用于将部分内容获取到其他SCSS文件中,但它们不会成为
CSS 文件,名称前用_表示。

列表

使用 scss 变量

无序列表

排列顺序无关紧要的一列元素。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

复制

<ul><li>...</li></ul>

SCSS中的变量以美元符号$开头。

有序列表

顺序至关重要的一组元素。

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

复制

<ol><li>...</li></ol>
$color: #f002.color{ $text_color: #ddd; background-color: $color; color: $text_color; text-shadow:0 0 2px darken($text_color, 40%);}

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

复制

<ul class="list-unstyled"><li>...</li></ul>

从上面的代码中,我们注意到$text_color只能在代码块内访问。

内联列表

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

复制

<ul class="list-inline"><li>...</li></ul>

Mixins

描述

带有描述的短语列表。

Description lists
A description list is perfect for defining terms.

Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem
nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

复制

<dl><dt>...</dt><dd>...</dd></dl>

SCSS
的另一个了不起的特性是它能够将可重用的样式打包在一起,并允许根据需要将样式导入到另一个样式块中,从而减少代码中的冗余。

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

Description lists
A description list is perfect for defining terms.

Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem
nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus.

复制

<dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl>

声明

自动截断

通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。

创建mixin非常简单,只需在样式块之前添加@mixin和mixin名称,如下所示

代码

@mixin {insert name} { //write CSS code here}

内联代码

通过 <code> 标签包裹内联样式的代码片段。

For example, <section> should be wrapped as inline.

复制

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

示例:

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。=

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

复制

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>