自学BootStrap（第一季）

BootStrap第一季

--------------------------------Class篇
自学BootStrap常用标签class总结：
------列表（有序列表ol、无序列表ul、自定义列表dl｛dt dd｝）
----------------无序列表ul/有序列表 去符号  class=“list-unstyled”
-------------内联列表class="list-inline" (为导航条而生！)
---------------自定义列表 
<dl>

    <dt>北京</dt>

    <dd>北京是中国的首都，是政治文化集中地</dd>

    <dt>上海</dt>

    <dd>上海号称东方的巴黎</dd>

</dl>

北京
北京是中国的首都，是政治文化集中地
上海
上海号称东方的巴黎
--------------------------------水平定义列表  class="dl-horizontal" （只有当屏幕大于768px的时候水平才会起作用）
-----------------------------------------------------------------------

------内容部分：
用于显示代码的三种风格：code、pre、kbd
--------code用于显示内联代码（单个单次或者句子）
--------pre用于显示代码内容（较多内容）----class pre-scrollable  当内容高度超过340px的时候会出现滚动条
--------kbd黑的北京，用于显示用户输入的内容

------表格部分：（important）（bootstrap提供了一种基础、4个附加样式、一个支持响应式的表格）
-----------------基础表格：class="table"   <table class="table"></table>
-----------------斑马线表格：（两行间隔颜色）<table class="table table-striped">(实现原理使用了nth-child())
-----------------带边框的表格：<table class="table table-bordered">
-----------------鼠标悬浮出现高亮的表格：<table class="table table-hover"></table>
-----------------紧凑型表格：<table class="table table-condensed"></table>
-----------------响应式表格：<div class="table-responsive"><table class="table"></table></div>

-------------------------------表格中，表格行的类--------------
<tr>提供了5中类，表示不同的背景颜色   
class="active" 表示当前活动的信息（灰色）
class="success" 表示成功行为（淡绿色）
class="info" 表示中立信息(淡蓝色)
class="warning" 表示警告信息（蛋黄色）
class="danger" 表示错误信息（淡紫色）
注:当使用table-hover的时候 鼠标悬停下后4个class的颜色会加深

---------------------------------基本表单--------------------------
class="form-group"表单之间外边据  用在Div中（div里面设置label和表单项）
在label里面使用class="sr-only"将会隐藏label的内容，如果不为表单输入控件设置label标签屏幕阅读器将会无法识别。
表单定制效果：class="form-control"-------------宽度100%、设置一个浅灰色边框、有4px圆角、有阴影效果并获取焦点时边框阴影出现变化、设置placeholder颜色#999

水平表单，显示为横向一排的表单，提示和内容一排---------------在form 中添加class="form-horizontal"   不过当width小于768px的时候还是会换行。

内联表单，表单显示成紧挨着一起浮动显示------------------在form中添加class="form-inline"