Bootstrap UI 组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_21852449/article/details/51813083

文本类型：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
文本对齐：

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

列表
无序列表ul、有序列表ol、定义列表dl
.list-unstyled ：去点列表
.list-inline : 内联列表

代码1

<code></code>、 <pre></pre>、<kbd></kbd>

1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容

.pre-scrollable 把<pre><pre>内容添加滚动条/源码请查看bootstrap.css第731行~第734行/

表格
.table：基础表格

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格

.table-condensed：紧凑型表格

.table-responsive：响应式表格
这里写图片描述

form表单
.form-horizontal : 水平表单风格（标签居左，表单控件居右）
.form-inline : 内联表单

下拉选择框select

<form role="form">
<div class="form-group">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  </div>
  <div class="form-group">
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
</form>

文本域textarea

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

复选框checkbox和单选按钮radio

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    </label>
  </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>

.checkbox-inline : 水平排列
.radio-inline ：水平排列
按钮
这里写图片描述

表单控件的大小

input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大

表单控件状态1

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
/源码请查阅bootstrap.css文件第1781行～第1794行/

表单控件状态2

.has-warning : 警告状态（黄色）
.has-error : 错误状态（红色）
.has-success : 成功状态（绿色）

表单提示信息

.help-block一般用在span上将提示信息块状显示，并且显示在空间的底部。

按钮

这里写图片描述

按钮大小

.btn-lg : 大型按钮
.btn-sm : 小型按钮
.btn-xs ：超小按钮
.btn-block : 块状按钮（充满整个容器）

按钮状态

.disabled ：禁用状态

图像

.img-responsive：响应式图片，主要针对于响应式设计
.img-rounded：圆角图片
.img-circle：圆形图片
.img-thumbnail：缩略图片

缩略图
写法：class:glyphicon glyphicon-flag
缩略图的应用

Bootstrap网格系统
列偏移

下拉菜单
这时一个最最简单的下拉菜单,上拉改为downup就是。
样式

<div class="dropdown">
    <button class="dropdown-toggle btn" data-toggle="dropdown">下拉菜单</button>

    <ul class="dropdown-menu">
        <li>1</li>
    </ul>

</div>

菜单标题

 <li role="presentation" class="dropdown-header">第一部分菜单头部</li>

对齐方式

.pull-right ：右对齐
菜单状态
.disabled : 禁用状态
.active:当前状态

按钮组
使用方法用一个div：btn-group包裹起来

按钮工具栏

等分按钮

.btn-group-justified : 自适应分组按钮

导航
胶囊形(pills)导航
垂直堆叠的导航
自适应导航
面包屑式导航
警示框
带关闭按钮的警示框：

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>

不带关闭按钮的警示框：

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

.alert alert-success
.alert alert-warning
.alert alert-info
.alert alert-danger

.alert-link ：警示框的连接用法

进度条

基本进度条
彩色进度条
条纹进度条
动态条纹进度条
层叠进度条
正常层叠进度条
不良效果层叠进度条
层叠条纹进度条
带Label的进度条

<h2>基本进度条</h2>
<div class="progress">
     <div class="progress-bar" style="width:40%">
    </div>
</div> 
<h2>彩色进度条</h2>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<div class="progress">
     <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div> 
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div> 
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div> 
<h2>条纹进度条</h2>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div> 
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div> 
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>层叠进度条</h2>
<h5>正常层叠进度条</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div> 
<h5>不良效果层叠进度条</h5> 
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:40%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:45%"></div>
</div> 
<h5>层叠条纹进度条</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>  
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div> 
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
</div>

<h5>进度条2</h5> 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

媒体对象

http://www.imooc.com/code/3815

列表组

基础列表组
带徽章的列表组
带链接的列表组
自定义列表组
组合列表项的状态

<h3>基础列表组</h3>
<ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
    <li class="list-group-item">CSS3边框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>
<h3>带徽章的列表组</h3>
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">
        <span class="badge">456</span>CSS3选择器
    </li>
    <li class="list-group-item">
        <span class="badge">892</span>CSS3边框
    </li>
    <li class="list-group-item">
        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">
        <span class="badge">1290</span>CSS3文本
    </li>
</ul>
<h3>带链接的列表组</h3>
<ul class="list-group">
    <li class="list-group-item">
        <a href="##">揭开CSS3的面</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3选择器</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3边框</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3背景</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3文本</a>
    </li>
</ul>
<h3>自定义列表组</h3>
<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
    </a>
</div>
<h3>组合列表项的状态</h3>
<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
<h3>多彩列表组</h3>
<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

面板
基础面板
带有头和尾的面板
彩色面板

<h3>基础面板</h3>
<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>
<h3>带有头和尾的面板</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
<h3>彩色面板</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">            详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
    <div class="panel-footer">作者：大漠</div>
</div>
<h3>面板中嵌套表格</h3>
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>＃</th>
                    <th>我的书</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>《图解CSS3》</td>
                    <td>2014-07-10</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>