image.png
一、五颜六色
指的是五种背景色和六种文本色， 分别代表不同的场景
分别以bg-、text-开头
背景色是提高了亮度而且降低了饱和度的一套同色系配色
-
-primary主色 -
-info副色 -
-success成功色 -
-warning警告色 -
-danger错误色 - 文本多了一种柔弱色
text-muted, 默认为浅灰
二、自定义布局辅助类
除了栅格系统的单位化，对齐化的布局，我们常常要使用自适应宽度的浮动布局
有4个类用来帮助我们进行自定义浮动布局，来满足非规整的排版需求。
-
pull-left, 向左浮动 -
pull-right, 向右浮动 -
clearfix浮动内部浮动 -
center-block块元素自动居中
其实就是margin-left: left和margin-right
三、可见性控制
分为显示、不占位的隐藏、占位的隐藏、屏幕阅读器可见(用于障碍性协助， 在连续行内表单控制中有应用)
也更好的与js协作进行切换
-
show显示元素 -
hidden隐藏元素， 其实就是display:none -
invisible占位隐藏， 其实就是visibility: hidden -
sr-onley仅仅屏幕阅读器可见，有助于盲人进行识别
四、快捷元素
提供了一个x关闭按钮、一个向下的箭头、一个隐藏内部文本的共3个类
-
close, 一个显示为叉的浅灰色的按钮，用来显示在关闭层的场合，它其实是两个标签组成，并由一个HTML实体符号显示x图标。
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
-
caret向下的箭头, 它由一个span元素负载，可以跟在其它内行元素后面，做下拉菜单的入口。
<span class="caret"></span>
-
text-hide图片替换，这个类可以添加到任意显示背景图片的标签上，它使用0号字来隐藏文字，用来完成 seo 的设计需求, 常常在网站的logo上使用。
<h1 class="logo text-hide">爱斗图</h1>
