Bootstrap 3

2019/01 12 04:01

 

这里说的工具类,是指手册中没有提到的,不针对特性组件的类,这种类可以跨组件使用。

其实bs3自带的工具类相当少,所以我在本文把bs4的工具类一并介绍。bs4的官方文档(http://v4-alpha.getbootstrap.com/utilities/borders/ )中已经包含了工具类的文档,但是bs3的官方文档中没有工具类的文档。

圆角类

bs4独有,bs3没有。

适用于图片、按钮和其他一些元素。

class="rounded"
class="rounded-top"
class="rounded-right"
class="rounded-bottom"
class="rounded-left"
class="rounded-circle"

bs3的实现:

.rounded
 {
  border-radius: 0.25rem


;
}

.rounded-top
 {
  border-top-right-radius: 0.25rem
;
  border-top-left-radius: 0.25rem


;
}

.rounded-right
 {
  border-bottom-right-radius: 0.25rem
;
  border-top-right-radius: 0.25rem


;
}

.rounded-bottom
 {
  border-bottom-right-radius: 0.25rem
;
  border-bottom-left-radius: 0.25rem


;
}

.rounded-left
 {
  border-bottom-left-radius: 0.25rem
;
  border-top-left-radius: 0.25rem


;
}

.rounded-circle
 {
  border-radius: 50%

;
}

清除浮动类

bs3和bs4都有。

<divclass="bg-info clearfix">
<buttonclass="btn btn-secondary float-xs-left">Example Button pulled left</button>
<buttonclass="btn btn-secondary float-xs-right">Example Button pullred right</button>
</div>

关闭按钮

都有。

也就是弹出层和其他一些可关闭的元素的右上角按钮。

<buttontype="button"class="close"aria-label="Close">
<spanaria-hidden="true">×</span>
</button>

背景颜色和文字颜色类

bs4跟bs3的区别是bs4多了.text-white {color: #fff !important;}

用于文字:

<pclass="text-muted">无情感文字</p>
<pclass="text-primary">主体文字</p>
<pclass="text-success">成功文字</p>
<pclass="text-info">信息文字</p>
<pclass="text-warning">警告文字</p>
<pclass="text-danger">危险文字</p>
<pclass="text-white">白色文字,用于背景是彩色的情况,不得用于链接文字</p>

用于链接:

<ahref="#"class="text-muted">Muted link</a>
<ahref="#"class="text-primary">Primary link</a>
<ahref="#"class="text-success">Success link</a>
<ahref="#"class="text-info">Info link</a>
<ahref="#"class="text-warning">Warning link</a>
<ahref="#"class="text-danger">Danger link</a>

用于背景:

<divclass="bg-primary text-white">主体背景色,文字白色</div>
<divclass="bg-success text-white">成功背景色,文字白色</div>
<divclass="bg-info text-white">信息背景色,文字白色</div>
<divclass="bg-warning text-white">警告背景色,文字白色</div>
<divclass="bg-danger text-white">危险背景色,文字白色</div>
<divclass="bg-inverse text-white">bg-inverse是黑色背景色,文字白色</div>
<divclass="bg-faded">灰色背景色</div>

Display属性相关类

bs4特有,bs3没有。

<divclass="d-inline">相当于“display: inline”</div>
<divclass="d-block">相当于“display: block”</div>
<divclass="d-inline-block">相当于“display: inline-block”</div>

隐藏文字

.text-hide用于将文字隐藏,然后设一个背景图片。为什么文字写出来又隐藏掉呢?因为这样h1的宽高依然是文字没隐藏之前的宽高,容易定位;为什么要用背景图而不是< img >图呢?因为根据“形式与内容相分离”的原则,有些图是属于形式的图,比如LOGO、背景条,这些图不应该用< img >来实现(尽管你可以实现),所以就要用背景图。还有一个原因是背景图通常会生成精灵图,< img >的图没法去生成精灵图。最后还有一个原因是文字多有助于SEO。

<h1class="text-hide">Custom heading</h1>

元素不可见类

其实就是visibility: hidden;

<divclass="invisible">...</div>

响应式元素类

响应式嵌入元素

嵌入元素就是视频、音频、flash等。这个实现需要三个类配合。

<divclass="embed-responsive embed-responsive-16by9">
<iframeclass="embed-responsive-item"src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"allowfullscreen></iframe>
</div>

bs3和bs4都支持16by9和4by3,bs4加入了21by9和1by1,如果bs3也想实现21by9和1by1,需要自行写规则:

.embed-responsive-21by9
 {
  padding-bottom: 42.857143%


;
}

.embed-responsive-1by1
 {
  padding-bottom: 100%

;
}

响应式浮动类

bs4支持,bs3不支持。类名格式是float-xs-left这样的,中间的字符可以是xs、sm、md、lg,后面的字符可以是left或right,表示在特定媒体查询条件下,究竟是左浮动还是右浮动。

<divclass="float-xs-left">Float left on all viewport sizes</div><br>
<divclass="float-xs-right">Float right on all viewport sizes</div><br>
<divclass="float-xs-none">Don't float on all viewport sizes</div><br>

<divclass="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<divclass="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<divclass="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<divclass="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

如果希望bs3支持,可以自行写CSS:

.float-xs-left
 {
  float: left !important


;
}

.float-xs-right
 {
  float: right !important


;
}

.float-xs-none
 {
  float: none !important


;
}

@media (min-width: 576px
) {
  .float-sm-left
 {
    float: left !important

;
  }
  .float-sm-right
 {
    float: right !important

;
  }
  .float-sm-none
 {
    float: none !important



;
  }
}

@media (min-width: 768px
) {
  .float-md-left
 {
    float: left !important

;
  }
  .float-md-right
 {
    float: right !important

;
  }
  .float-md-none
 {
    float: none !important



;
  }
}

@media (min-width: 992px
) {
  .float-lg-left
 {
    float: left !important

;
  }
  .float-lg-right
 {
    float: right !important

;
  }
  .float-lg-none
 {
    float: none !important



;
  }
}

@media (min-width: 1200px
) {
  .float-xl-left
 {
    float: left !important

;
  }
  .float-xl-right
 {
    float: right !important

;
  }
  .float-xl-none
 {
    float: none !important


;
  }
}

紧贴顶部类

.pos-f-t是bs4特有的类,通常用于始终最顶部的导航,比如weibo.com就在用。想在bs3中实现,可以自行声明规则:

.pos-f-t
 {
  position
: fixed;
  top: 0
;
  right: 0
;
  left: 0
;
  z-index: 1001

;
}

100%类

bs4特有,.w-100即宽度百分之百,.h-100即高度百分之百。bs3可以自行声明:

.w-100
 {
  width: 100%


;
}

.h-100
 {
  height: 100%

;
}

margin和padding类

bs4有margin和padding相关的实现,但是bs3没有,bs4的规则是:

格式: {property}{sides}-{size}

m - for classes that set margin
p - for classes that set padding

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
a - for classes that set a margin or padding on all 4 sides of the element

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

实现是:

$spacer:   1rem !default
;
$spacer-x: $spacer !default
;
$spacer-y: $spacer !default

;
$spacers: (
  0
: (
    x: 0
,
    y: 0


  ),
  1



: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2
: (
    x: ($spacer-x * 1.5
),
    y: ($spacer-y * 1.5

)
  ),
  3
: (
    x: ($spacer-x * 3
),
    y: ($spacer-y * 3

)
  )
) !default







;


@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $lengths in $spacers {
    $length-x:   map-get($lengths, x);
    $length-y:   map-get($lengths, y);

    .#{$abbrev}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides

    .#{$abbrev}t-#{$size} { #{$prop}-top:    $length-y !important; }

    .#{$abbrev}r-#{$size} { #{$prop}-right:  $length-x !important; }

    .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }

    .#{$abbrev}l-#{$size} { #{$prop}-left:   $length-x !important; }

// Axes

    .#{$abbrev}x-#{$size} {
#{$prop}-right:  $length-x !important;
#{$prop}-left:   $length-x !important;


    }
    .#{$abbrev}y-#{$size} {
#{$prop}-top:    $length-y !important;
#{$prop}-bottom: $length-y !important;




    }
  }
}

上面代码比较复杂,有几个SASS的知识点。

1、$spacers变量的值是一个map类型的数据。

2、@each $prop, $abbrev in (margin: m, padding: p) {}这是一个遍历,被遍历的map是(margin: m, padding: p),也就是说,遍历的第一次的时候,$prop的值是margin,$abbrev的值是m

3、内部又有一个遍历@each $size, $lengths in $spacers {},被遍历的map就是$spacers,遍历的第一次的时候,$size的值是0,$lengths的值是(x: 0, y: 0)

4、内部又定义了两个变量:$length-x: map-get($lengths, x);$length-y: map-get($lengths, y);,前者的map-get($lengths, x)的意思是获取$lengths的x键的值,当前就是0,也就是$length-x的值是0,同理,$length-y的值也是0。

5、下面又有这样的语句.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }#{$abbrev}当前是m,#{$size}当前是0,#{$prop}当前是margin,$length-y当前是0,$length-x当前是0,于是这个语句编译成的CSS就是.m-0 {margin: 0 0 !important;}

6、下面还有类似的四句,也形成四个规则。

7、下面还有两个语句,形成两个规则。

8、也就是说,大遍历第一次中的小遍历第一次,会形成7个语句,总共小遍历会有2 x 4 = 8次,最终形成7 x 8 = 56个规则。

上面代码如果用于bs3是完全可用的,不过,由于bs4全面面向rem,如果你觉得你只想开发PC页面,并不需要rem单位,也不用乘以一个倍数,那么我们现在确定一些新类命名的规则:

1、大规则:.m-0是margin: 0 !important;
2、四边规则:.mt-0、.mb-0、.ml-0、.mr-0是4个更具体的规则
3、X轴/Y轴规则:.mx-0是左右0,.my-0是上下0。
以上跟bs4的规则一样。但是下面的规则就不一样了。
4、大规则:.m-5是margin: 5px !important;,.m-10是margin: 10px !important;,.m-15是margin: 15px !important;,.m-20是margin: 20px !important;。
6、四边规则根据大规则类推。
7、X轴/Y轴规则也根据大规则类推。
8、也是margin和padding分别有一套规则。

最后SCSS如下:

@each $prop, $abbrev in (margin: m, padding:
 p) {
  @each $multiple in (5, 10, 15, 20

) {
    $length:    $multiple;
    $length-x:  $multiple * 1
px;
    $length-y:  $multiple * 1

px;

    .#{$abbrev}-#{$length} { #{$prop}:         $length-y $length-x !important; }

    .#{$abbrev}t-#{$length} { #{$prop}-top:    $length-y !important; }

    .#{$abbrev}r-#{$length} { #{$prop}-right:  $length-x !important; }

    .#{$abbrev}b-#{$length} { #{$prop}-bottom: $length-y !important; }

    .#{$abbrev}l-#{$length} { #{$prop}-left:   $length-x !important; }



    .#{$abbrev}x-#{$length} {
#{$prop}-right:  $length-x !important;
#{$prop}-left:   $length-x !important;



    }

    .#{$abbrev}y-#{$length} {
#{$prop}-top:    $length-y !important;
#{$prop}-bottom: $length-y !important;




    }
  }
}

水平居中类

bs3的类是center-block,bs4的对应类是mx-auto

<divclass="center-block"style="width: 200px;">


  Centered element
</div>

排版

bs3和bs4都有。

文字两端对齐

<p class="text-justify">asdf ghjk l;</p>

强制不折行

<p class="text-nowrap">asdf ghjk l;</p>

文字居左、居中、居右

bs4有更复杂的.text-xs-left这样的配合媒体查询的类,bs3则非常简单,只有.text-left、.text-right、.text-center。

字母变形

bs3和4都有。

<pclass="text-lowercase">字母全部小写</p>
<pclass="text-uppercase">字母全部大写</p>
<pclass="text-capitalize">单词首字母全部大写</p>

加粗、斜体

bs4特有。

<pclass="font-weight-bold">bs4特有</p>
<pclass="font-weight-normal">bs4特有</p>
<pclass="font-italic">bs4特有</p>

文字对齐类

文字对齐类只在bs4中有,bs3并没有。CSS的vertical-align属性其实适用场合并不多,常用的就是topmiddlebottom。另外text-toptext-bottom主要用于图片跟文字的对齐。

<spanclass="align-baseline">baseline</span>
<spanclass="align-top">top</span>
<spanclass="align-middle">middle</span>
<spanclass="align-bottom">bottom</span>
<spanclass="align-text-top">text-top</span>
<spanclass="align-text-bottom">text-bottom</span>

想在bs3实现的话,就是:

.align-baseline
 {
  vertical-align: baseline !important


;
}

.align-top
 {
  vertical-align: top !important


;
}

.align-middle
 {
  vertical-align: middle !important


;
}

.align-bottom
 {
  vertical-align: bottom !important


;
}

.align-text-bottom
 {
  vertical-align: text-bottom !important


;
}

.align-text-top
 {
  vertical-align: text-top !important

;
}

额外整理的类

这里提到的类都是bs3手册中有的类,但是也可以跨组件使用,所以我也整理出来。

左浮动右浮动

<divclass="pull-left">...</div>
<divclass="pull-right">...</div>

显示、隐藏

<divclass="show">...</div>
<divclass="hidden">...</div>

fixed定位

<divclass="affix">...</div>

--转载请注明: http://91o.cc/bootstrap-3/