bootstrap学习笔记–bootstrap组件

眼前都学习了bootstrap环境搭建与核心布局方面的知,下面将修下关于bootstrap的相关组件,知识点有点多。

至于bootstrap组件知识点目录:

  1. Bootstrap–代码显示
  2. Bootstrap–表格
  3. Bootstrap–表单
  4. Bootstrap–按钮
  5. Bootstrap–图片
  6. Bootstrap–辅助类
  7. Bootstrap–响应式实用工具
  8. Bootstrap–字体图标
  9. Bootstrap–下拉菜单
  10. Bootstrap–按钮组
  11. Bootstrap–按钮下拉菜单
  12. Bootstrap–输入框组
  13. Bootstrap–导航元素
  14. Bootstrap–导航栏
  15. Bootstrap–面包屑导航
  16. Bootstrap–分页
  17. Bootstrap–标签
  18. Bootstrap–徽章
  19. Bootstrap–超大屏幕
  20. Bootstrap–页面标题
  21. Bootstrap–缩略图
  22. Bootstrap–警告
  23. Bootstrap–进度条
  24. Bootstrap–多媒体对象
  25. Bootstrap–列表组
  26. Bootstrap–面板
  27. Bootstrap–Wells

1.Bootstrap 代码

Bootstrap 允许你为零星栽方式示代码:

  • 率先种是 <code> 标签。如果您想只要内联显示代码,那么你当利用
    <code> 标签。
  • 仲栽是 <pre>
    标签。如果代码需要给显示为一个独门的块元素或代码有差不多执,那么您当运用
    <pre> 标签。

请求保管当您运 <pre> 和 <code> 标签时,开始跟得了标签下了
unicode 变体: < 和 >

    <div class="container">
        <div class="row">
            <p><code>&lt;select&gt;</code></p>
            <pre>
                &lt;div&gt;
                Hello World!
                &lt;/div&gt;
            </pre>
        </div>
    </div>

展示效果:

图片 1

2.Bootstrap 表格

 

Bootstrap 提供了一个清楚的创建表格的布局。下表列出了 Bootstrap
支持之有的表格元素:

标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

 

 

 

 

 

 

 

 

表格类

下表样式而用于表格中:

描述
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑

 

 

 

 

 

 

<tr>, <th> 和 <td> 类

下表的类可用于表格的执行要单元格:

描述
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

 

 

 

 

 

 

中心的表格

若是你想要一个单独包含内边距(padding)和档次划分的基本表,请上加
class .table,如下面实例所示:

<div class="row">
            <table class="table">
                <caption class="text-center">基本表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                </tbody>
            </table>
        </div>

展示力量:

图片 2

可摘的表格类

除此之外核心的表标记和 .table
class,还有有方可就此来吧符定义样式的类似。下面将于您介绍这些类似。

条纹表格

经过添加 .table-striped class,您将于 <tbody>
内的行上看到条纹,如下面的实例所示:

<div class="row">
            <table class="table table-striped">
                <caption class="text-center">条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

著效果:

图片 3

边框表格

透过添加 .table-bordered class,您将视每个元素周围都来边框,且占用满表格是圆角的,如下面的实例所示:

<div class="row">
            <table class="table table-bordered">
                <caption class="text-center">边框表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

来得效果:

图片 4

终止表格

经过添加 .table-hover class,当指针悬停在行上时会产出浅灰色背景,如下面的实例所示:

<div class="row">
            <table class="table table-hover">
                <caption class="text-center">悬停表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

来得力量:

图片 5

精简表格

透过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起再次艰难凑,如下面的实例所示。这当纪念吃信息看起又不方便凑时大实惠。

<div class="row">
            <table class="table table-condensed">
                <caption class="text-center">精简表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

显示力量:

图片 6

前后文类

下表中所列有的内外文类允许你改变表格行抑单个单元格的背景颜色。

描述
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作

 

 

 

 

 

 

这些看似可以为此到<tr>、<td>、<th>中,如下面实例所示:

<div class="row">
            <table class="table">
                <caption class="text-center">上下文表格布局</caption>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr class="success">
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr class="warning">
                        <td>No.3</td>
                        <td>苏州</td>
                    </tr>
                    <tr class="danger">
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

亮力量:

图片 7

响应式表格

通过将自由的 .table 包在 .table-responsive class
内,您得叫表格水平滚动以适应小型设备(小于 768px)。当于过 768px
宽的重型设施上查看时,您将看不到任何的差异。

 <div class="table-responsive">
        <table class="table">
            <caption class="text-center">响应式表格布局</caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>No.1</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>No.2</td>
                    <td>上海</td>
                </tr>
                <tr>
                    <td>No.3</td>
                    <td>苏州</td>
                </tr>
                <tr>
                    <td>No.4</td>
                    <td>南京</td>
                </tr>
            </tbody>
        </table>
    </div>

亮效果:

图片 8

 

3.Bootstrap 表单

表单布局

Bootstrap 提供了下列项目的表单布局:

  • 直表单(默认)
  • 内联表单
  • 水平表单

笔直或基本表单

主干的表单结构是 Bootstrap
自带的,个别的表单控件自动接到有大局样式。下面列有了创办基本表单的步子:

  • 朝父 <form> 元素添加 role=”form”
  • 把标签和控件放在一个带有 class .form-group 的 <div>
    中。这是收获最佳距离所必要的。
  • 向装有的文件元素 <input>、<textarea> 和 <select>
    添加 class .form-control



    这里是块级帮助文本的实例。


来得效果:

图片 9

内联表单

设若急需创造一个表单,它的所有因素是内联的,向左对一起之,标签是一视同仁的,请于
<form> 标签添加 class .form-inline

<form role="form" class="form-inline">
                <div class="form-group">
                    <label for="name">名称</label>
                    <input type="text" class="form-control" id="name"
                        placeholder="请输入名称">
                </div>
                <div class="form-group">
                    <label for="inputfile">文件输入</label>
                    <input type="file" id="inputfile">
                    <p class="help-block">这里是块级帮助文本的实例。</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                        请打勾
                    </label>
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>

著力量:

图片 10

  • 默认情况下,Bootstrap 中之 input、select 和 textarea 有 100%
    宽度。在利用内联表单时,您要在表单控件上安一个小幅。
  • 使用 class .sr-only,您得隐蔽内联表单的价签。

水平表单

水平表单与其他表单不仅标志的数目上不同,而且表单的显现形式吗不同。如要创建一个程度布局的表单,请按下的几个步骤进行:

  • 通向父 <form> 元素添加 class .form-horizontal
  • 拿标签和控件放在一个蕴含 class .form-group 的 <div> 中。
  • 望标签上加 class .control-label

显示力量:

图片 11

支持之表单控件

Bootstrap 支持太广的表单控件,主要是 input、textarea、checkbox、radio
和 select

输入框(Input)

极致普遍的表单文本字段是输入框
input。用户可于其间输入大多数少不了之表单数据。Bootstrap
提供了对有原生的 HTML5 的 input
类型的支撑,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。适当的 type 声明是必需的,这样才能够给 input 获得完全的体。

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

著效果:

图片 12

文本框(Textarea)

当你需开展多实践输入的时,则可采用文本框
textarea。必要常常可改变 rows 属性(较少的行 = 较小之盒子,较多的行 =
较生之盒子)。

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

著力量:

图片 13

复选框((Checkbox)和单选框(Radio)

复选框和单选按钮用于给用户从同多样预设置的选项中开展精选。

  • 当创建表单时,如果您想叫用户从列表中选择多只挑选时,请以 checkbox。如果您限制用户只能选择一个精选,请以 radio
  • 本着相同密密麻麻复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制其显示在同一行上。





显示力量:

图片 14

选择框(Select)

当你想为用户从多独选择中展开分选,但是默认情况下只能选择一个精选时,则应用选择框。

  • 运 <select>
    展示列表选项,通常是那些用户非常熟悉的选择列表,比如州或数字。
  • 使用 multiple=”multiple” 允许用户选择多只选择。



著力量:

图片 15

静态控件

当您需以一个品位表单内的表单标签后放置纯文本时,请于 <p> 上行使
class .form-control-static

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    </div>
  </div>
</form>

显示力量:

图片 16

表单控件状态

除了 :focus 状态(即,用户点击 input 或以 tab 键聚焦到 input
上),Bootstrap 还呢禁用的输入框定义了体制,并提供了表单验证的 class。

输入框焦点

当输入框 input
接收及 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow

夺的输入框 input

苟您想要禁用一个输入框
input,只待简单地互补加 disabled 属性,这不仅会经用输入框,还见面转输入框的体裁和当鼠标的指针悬停于要素上时不时鼠标指针的体制。

夺的字段集 fieldset

针对 <fieldset> 添加 disabled 属性来剥夺 <fieldset>
内的持有控件。

证状态

Bootstrap
包含了左、警告和成功消息之证实样式。只需要对父元素简单地加上适当的
class(.has-warning、 .has-error 或 .has-success)即可使说明状态。

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单(Fieldset disabled)
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入错误
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

展示力量:

图片 17

表单控件大小

卿得独家下
class .input-lg 和 *.col-lg-** 来装表单的高度和宽度。

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默认输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默认选择</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

来得效果:

图片 18

表单帮助文本

Bootstrap 表单控件可以在输入框 input
上闹一个块级帮助文本。为了丰富一个占整个宽度之内容块,请以
<input> 后下 .help-block

<form role="form">
   帮助文本实例
   <input class="form-control" type="text" placeholder="">
   一个较长的帮助文本块,超过一行,
   需要扩展到下一行。本实例中的帮助文本总共有两行。
</form>

著力量:

图片 19

4.Bootstrap 按钮

以下体可用于<a>, <button>, 或
<input> 元素上:

描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

显效果:

图片 20

按钮大小

下表列有了取得各种大小按钮的 class:

Class 描述
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。

 

 

 

 

 

<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮
   </button>
   <button type="button" class="btn btn-default">
      默认大小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-xs">
      特别小的按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮
   </button>
</p>

来得力量:

图片 21

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class,下面用进行详细讲解。

激活状态

按钮在激活时将呈现为吃仍压的外观(深色的背景、深色的边框、阴影)。

下表列有了让仍钮元素和锚元素呈激活状态的 class:

元素 Class
按钮元素 添加 .active class 来显示它是激活的。
锚元素 添加 .active class 到 <a> 按钮来显示它是激活的。

 

 

 

 

<p>
   <button type="button" class="btn btn-default btn-lg ">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按钮
   </button>
</p>

著效果:

图片 22

夺状态

当您禁用一个按钮时,它的颜料会换淡 50%,并去渐变。

下表列有了为本钮元素和锚元素呈禁用状态的 class:

元素 Class
按钮元素 添加 disabled 属性 到 <button> 按钮。
锚元素 添加 disabled class 到 <a> 按钮。
注意:该 class 只会改变 <a> 的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接。

 

 

 

 

 

<p>
   <button type="button" class="btn btn-default btn-lg">
      默认按钮
   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮
   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按钮
   </button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      链接
   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用链接
   </a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始链接
   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始链接
   </a>
</p>

展示效果:

图片 23

相关文章