bootstrap 3, 全局样式、组件学习总结。

时间 2019-11-16

原文原文链接

全局样式css

概览
1. 移动设备优先为了确保适当的绘制和触屏缩放，须要在 <head> 之中添加 viewport 元数据标签。 user-scalable=no表示禁止缩放。

2. 布局容器
    .container 类用于固定宽度并支持响应式布局的容器       
    .container-fluid  类用于 100% 宽度，占据所有视口（viewport）的容器

栅格系统
1. .row > .col- 列必须包含在行内, 默认12列根据媒体查询将列前缀分为4种 col-lg-* ， col-md-* , col-sm-* , col-xs-*
  在阈值处改变做用范围。分别为 width 等于 768px ，992px ，1200px。
2. ```
列偏移    col-lg-offset-*    表示向右偏移*列。
```
排版
1. 对齐： .text-left .text-right .text-center .justify (两端对齐) .nowrap (不换行)
2. 改变大小写： .text-lowercase .text-uppercase .text-capitalize
3. 基本缩略语 : <abbr title=""></abbr>
4. 首字母缩略语 : <abbr title="" class=“initialism”></abbr>
5. 引用 :<blockquote></blockquote>
6. 列表 : .list-unstyled 无样式列表 .list-inline 内联列表
代码
1. 内联代码 : <code></code>
2. 用户输入 : <kbd></dbd>
3. 代码块 : <pre></pre>
4. 变量 : <var></var>
5. 程序输出 :<samp></samp>

表格

表格基本样式  .table   (每一个表格先加上的类 ，默认无边框）

条纹状表格    .table-striped    (给<tbody>里行添加斑马线效果)

```
带边框表格    .table-bordered
```
```
鼠标悬停效果   .table-hover
```
```
紧缩型表格    .table-condensed
```

状态类 （改变单元格<td>或者行<tr>颜色）     .success    .info    .danger    .warning    .active

响应式表格（根据页面大小改变大小，文字不隐藏，超出出现滚动条）    .table-responsive

表单
1. 基本格式 <form> <div class="form-group"> <label class="sr-only"></label><input class="form-control">...
  
  全部设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%; 将 label 元素和前面提到的控件包裹在 .form-group 中能够得到最好的排列。css
2. 内联表单 .form-inline 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
3. 水平排列表单
经过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，能够将 label 标签和控件组水平并排布局。这样作将改变 .form-group 的行为，使其表现为栅格系统中的行（row），所以就无需再额外添加 .row 了表单元素对不齐：标签可能写错了 <label>--<lable>?java

> 内联单选和多选框
经过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件    上，可使这些控件排列在一行。

4. 下拉选

使用默认选项或添加 multiple 属性能够同时显示多个选项。 eg: <select multiple class="form-control"> 5. 静态控件若是须要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类便可。 6. 校验状态 > Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素便可。任何包含在此元素以内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 7. 控制尺寸经过 .input-lg 相似的类能够为控件设置高度，经过 .col-lg-* 相似的类能够为控件设置宽度。水平排列的表单组的尺寸--- 经过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。api

按钮
1. 声明类.btn 预约义样式类.btn-info .btn-danger .btn-warning .btn-success .btn-primary .btn-default
2. 按钮尺寸类 .btn-lg .btn-sm .btn-xs
3. 经过给按钮添加 .btn-block 类能够将其拉伸至父元素100%的宽度，并且按钮也变为了块级（block）元素。
4. 激活/禁用状态 .active .disabled
5. <a>元素建立按钮 .btn .btn-default(任意与定义样式) .active(可选)
6. <input>元素建立按钮同上
图片
1. 响应式图片

在 Bootstrap 版本 3 中，经过为图片添加 .img-responsive 类可让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。ide

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 便可。Bootstrap 并无自动为全部图像元素设置这一属性，由于这会致使其余图像格式出现错乱。 2. 图片形状类 .img-rounded .img-circle .img-thumbnail工具

响应式工具
1. 可用的类对应屏幕是否可见、如何显示 .visible-xs-* .visible-sm-* .visible-md-* .visible-lg-*
  .hidden-xs .hidden-sm .hidden-md .hidden-lg ＊多是.visible--block .visible--inline .visible-*-inline-block
2. 打印类对应打印机是否可见、如何显示 .visible-print-block .visible-print-inline .visible-print-inline-block .hidden-print

组件

Glyphicons 字体图标布局
1. 不要和其余组件混合使用
2. 只对内容为空的元素起做用
3. 应该建立一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
4. 必须加一类 .glyphicon 再加一个名称类如 glyphicon-ok-sign
下拉菜单用于显示连接列表的可切换、有上下文的菜单。字体

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另外一个声明了 position: relative; 的元素。而后加入组成菜单的 HTML 代码。动画
1. 结构。div .dropdown data-toggle="dropdown" > button + span.caret + ul .dropdown-menu > li
2. 对齐右对齐： div .dropdown .pull-right , ul .dropdown-menu dropdown-menu-right
3. 标题 li .dropdown-header
4. 分割线 li .divider
5. 禁用 li .disabled
按钮组经过按钮组容器把一组按钮放在同一行里。经过与按钮插件联合使用，能够设置为单选框或多选框的样式和行为。网站
1. 实例 div . btn-group
2. 工具栏 div .btn-toolbar > div btn-group + div btn-group ..
3. 尺寸 .btn-group-* (xs、sm、lg)
4. 嵌套 .btn-group > .btn-group
  把下拉选混入按钮组。不须要.dropdown
5. 垂直排列 .btn-group .btn-group-vertical
6. 两端对齐 .btn-group .btn-group-justified （如果<a>元素按钮,justified可用。如果<button>，每个<button>元素都要单独放在一个div .btn-group中）
按钮式下拉菜单
1. 分列式下拉菜单，将<span class="caret"> 和按钮名分别放在一个<button>中.
2. 向上弹出式菜单 .dropup
输入框组经过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，能够实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，能够给 .form-control 的前面或后面添加额外的元素。
1. 仅支持<input>元素不支持在输入框的单独一侧添加多个额外元素不支持在单个输入框组中添加多个表单控件
2. 尺寸 .input-group-*
3. 做为额外元素的多选框和单选框写在 <span input-group-addon>中
4. 做为额外元素的按钮：写在 <span input-group-btn>中
5. 做为额外元素的按钮式下拉菜单：只能用按钮式下拉菜单。
6. 做为额外元素的分裂式按钮下拉菜单：同上。
导航 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类能够改变样式。
1. 标签页：ul .nav .nav-tabs > li
  
  注意 .nav-tabs 类依赖 .nav 基类。
2. 胶囊式标签页：ul .nav .nav-pills > li
3. 两端对齐的标签页 : .nav-justified
4. 禁用的连接： li .disabled
5. 添加下拉菜单 : li .dropdown （下拉选）
6. 导航点击交互效果 js 代码

- 导航条
        导航条是在您的应用或网站中做为导航页头的响应式基础组件。它们在移动设备上能够折叠（而且可开可关），且在视口（viewport）宽度增长时逐渐变为水平展开模式。
    1. 格式： nav .navbar .navbar-* > div .navbar-header + div .collapse  .navbar-collapse >导航ul .nav  .navbar-nav +form .navbar-form .navbar-left  + 导航.navbar-right  .navbar-nav .nav
    2. 表单    在导航条里添加表单 加类 .navbar-form    
    3. 按钮    在导航条里添加按钮   添加类.navbar-btn 可垂直居中   也能够直接方法哦上述表单中，不需添加这个类。
    4. 文本    在导航条里添加文本      .navbar-text
    5. 非导航的连接
            或许你但愿在标准的导航组件以外添加标准连接，那么，使用 .navbar-link 类可让连接有正确的默认颜色和反色设置。
    6. 组件排列    .navbar-left     .navbar-right
    7. 固定在顶部    固定在底部
            添加 .navbar-fixed-top/.navbar-fixed-bottom 类可让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内部（padding）。
    >这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你本身的值，或用下面给出的代码均可以。提示：导航条的默认高度是 50px。
    ```
body { padding-top: 70px; }    body { padding-bottom: 70px; }

8. 静止在顶部    .navbar-static-top
        它会随着页面向下滚动而消失,不用给 body 添加任何内部（padding）
9. 反色的导航条         
          经过添加 .navbar-inverse 类能够改变导航条的外观

路径导航 ul中添加 .breadcrumb
分页 .pagination
1. 尺寸 .pagination-lg .pagination-sm
2. 翻页（只有向前、向后）ul中添加 .pager
对齐连接在翻页ul >li 中添加类 .previous .next 3. 可选的禁用状态，激活状态 li .active li .disabled
标签 span .label .label-default

/ .label-primary / .label-success / .label-info /.label-danger /.label-warning

徽章给连接、导航等元素嵌套 <span class="badge"> 元素，能够很醒目的展现新的或未读的信息条目。
巨幕 .jumbotron
页头
页头组件可以为 h1 标签增长适当的空间，而且与页面的其余部分造成必定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其余组件（须要增长一些额外的样式）。
缩略图 .thumbnail (图片建议放在<a>元素中)
1. 自定义内容 div .thumbnail > img +div.caption
警告框
1. .alert ( 这个必须设置) .alert-success 等没有默认选项。
2. 可关闭的警告框务必给 <button> 元素添加 data-dismiss="alert" 属性。（× 是 ‘ × ’ 号）
3. 警告框中的连接 a .alert-link
进度条
1. ```
格式     div .progress > div .progress-bar style="width:**%" >**%
```
2. ```
进度条数字较低状况  ： 在style 中添加   min-width:20px;
```
3. 根据情景变换效果 progress-bar-info 、..success 、 ..warning 、..danger
4. 条纹效果在 .progress里添加 .progress-striped或在 .progress-bar 里添加.progress-bar-striped
5. 动画效果在 .progress 里加 active . 或者 .progress-bar里加active
6. 堆叠效果在 .progress里添加多个 .progress-bar (超过100%会换行。。)
媒体对象
1. 默认样式 div .media > (a .media-left > img ) +(div .media-body >h*.media-heading)
2. 媒体对象列表 ul .media-list > li .media .......
  
  （媒体对象的meida-body里嵌入媒体对象可现实出层级缩进效果）
列表组
1. 基本实例 ul .list-group > li .list-group-item
2. 徽章在 li 中加入徽章 <span class="badge>
3. 连接把ul 元素换成 div，吧 li 标签换成 <a>标签。
4. 被禁用的条目 a .disabled
5. 情景类列表项.list-group-item 中添加类 .list-group-item-info ...等
6. 定制内容列表项中可添加　定制内容，能够类　.list-group-item-heading .list-group-item-text
面板 panel 默认的 .panel 组件所作的只是设置基本的边框（border）和内补（padding）来包含内容。
1. 带标题的面板面板 .panel 面板标题.panel-heading 面板内容 .panel-body .panel-title
2. ```
带脚注的面板    .panel-footer
```
3. 情景效果 .panel-primary ..info...danger...warning...success...default
4. 带表格的面板在.panel 中 .panel-body外添加 table .table
5. 带列表组的面板同上加入 ul .list-group
具备响应式特性的嵌入内容 div .embed-responsive-16by9 (或者 4by3) > <iframe>、<embed>、<video> 和 <object> 可直接行程响应式的元素。若是你但愿让最终样式与其余属性相匹配，还能够明确地使用一个派生出来的 .embed-responsive-item 类。

超级提示：不须要为 <iframe> 元素设置 frameborder="0" 属性，由于咱们已经替你这样作了！

Well 把 Well 用在元素上，能有嵌入（inset）的的简单效果。 div .well
1. 可选类 .well-lg .well-sm

bootstrap 3, 全局样式、组件 学习总结。

全局样式css

组件

未完！

bootstrap 3, 全局样式、组件学习总结。