学习Bootstrap3之辅助类

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">&times;</span>
</button>

• caret 向下的箭头, 它由一个span元素负载，可以跟在其它内行元素后面，做下拉菜单的入口。

<span class="caret"></span>

• text-hide 图片替换，这个类可以添加到任意显示背景图片的标签上，它使用0号字来隐藏文字，用来完成 seo 的设计需求, 常常在网站的logo上使用。

<h1 class="logo text-hide">爱斗图</h1>