Bootstrapbootstrap学习笔记–bootstrap组件

表单布局

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

  • 笔直表单(暗中同意)
  • 内联表单
  • 水平表单

表明状态

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>

彰显效果:

Bootstrap 1

切中要害表格

因而添加 .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>

体现效果:

Bootstrap 2

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

下表的类可用于表格的行依旧单元格:

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

 

 

 

 

 

内外文类

下表中所列出的光景文类允许你改变表格行或单个单元格的背景颜色。

描述
.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>

来得效果:

Bootstrap 3

剥夺的输入框 input

若果你想要禁止使用四个输入框
input,只须求不难地添加 disabled 属性,那不但会禁用输入框,还会变动输入框的样式以及当鼠标的指针悬停在要素上时鼠标指针的体制。

剥夺状态

当你禁用一个按钮时,它的颜色会变淡 4/8,并失去渐变。

下表列出了让按钮成分和锚元素呈禁止使用状态的 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>

呈现效果:

Bootstrap 4

眼下已经学习了bootstrap环境搭建以及着力布局方面包车型大巴文化,上边将学习下关于bootstrap的有关组件,知识点有点多。

内联表单

假诺急需创立1个表单,它的具备因素是内联的,向左对齐的,标签是玉石俱焚的,请向
<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>

来得效果:

Bootstrap 5

  • 暗中同意情状下,Bootstrap 中的 input、select 和 textarea 有 百分之百宽度。在行使内联表单时,您须求在表单控件上安装一个上涨幅度。
  • 使用 class .sr-only,您能够隐蔽内联表单的标签。

支撑的表单控件

Bootstrap 协助最广大的表单控件,首借使 input、textarea、checkbox、radio
和 select

主干的表格

万一你想要3个只包括内边距(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>

来得效果:

Bootstrap 6

3.Bootstrap 表单

文本框(Textarea)

当您需求开始展览多行输入的时,则能够利用文本框
textarea。要求时方可变动 rows 属性(较少的行 = 较小的盒子,较多的行 =
较大的盒子)。

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

展现效果:

Bootstrap 7

条纹表格

通过添加 .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>

体现效果:

Bootstrap 8

甘休表格

由此添加 .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>

来得效果:

Bootstrap 9

静态控件

当您须要在3个程度表单内的表单标签后放置纯文本时,请在 <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>

展现效果:

Bootstrap 10

  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

激活状态

按钮在激活时将突显为被按压的外观(深色的背景、深色的边框、阴影)。

下表列出了让按钮成分和锚元素呈激活状态的 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>

展现效果:

Bootstrap 11

可选的表格类

除去主旨的报表标记和 .table
class,还有一部分能够用来为标记定义样式的类。上面将向您介绍这一个类。

表单支持文本

Bootstrap 表单控件能够在输入框 input
上有三个块级扶助文本。为了丰硕二个占有整个宽度的剧情块,请在
<input> 后利用 .help-block

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

来得效果:

Bootstrap 12

表格类

下表样式可用于表格中:

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

 

 

 

 

 

表单控件状态

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

水平表单

水平表单与其余表单不仅标志的数量上不相同,而且表单的彰显情势也不比。如需创建三个品位布局的表单,请按上边包车型大巴多少个步骤实行:

  • 向父 <form> 成分添加 class .form-horizontal
  • 把标签和控件放在2个涵盖 class .form-group 的 <div> 中。
  • 向标签添加 class .control-label

突显效果:

Bootstrap 13

表单控件大小

你能够分级选取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>

彰显效果:

Bootstrap 14

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>

展现效果:

Bootstrap 15

按钮大小

下表列出了获取种种大小按钮的 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>

呈现效果:

Bootstrap 16

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>

展现效果:

Bootstrap 17

 

 

剥夺的字段集 田野(field)set

对 <田野(field)set> 添加 disabled 属性来剥夺 <田野先生set>
内的有所控件。

2.Bootstrap 表格

 

Bootstrap 提供了三个显然的创立表格的布局。下表列出了 Bootstrap
帮忙的片段表格成分:

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

 

 

 

 

 

 

 

输入框主题

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

输入框(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>

来得效果:

Bootstrap 18

垂直或宗旨表单

骨干的表单结构是 Bootstrap
自带的,个其他表单控件自动接到一些大局样式。下边列出了创立基本表单的步子:

  • 向父 <form> 元素添加 role=”form”
  • 把标签和控件放在多个带有 class .form-group 的 <div>
    中。那是获取最佳距离所必需的。
  • 向具有的文书成分 <input>、<textarea> 和 <select>
    添加 class .form-control



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


来得效果:

Bootstrap 19

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

复选框和单选按钮用于让用户从一名目繁多预设置的选项中展开分选。

  • 当创造表单时,若是你想让用户从列表中精选若干个挑选时,请使用 checkbox。假诺您限制用户只好选取八个抉择,请使用 radio
  • 对一种类复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。





来得效果:

Bootstrap 20

 

边框表格

透过添加 .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>

来得效果:

Bootstrap 21

选择框(Select)

当你想让用户从多个选取中展开选取,可是暗许情形下只可以选用三个选拔时,则选择选用框。

  • 动用 <select>
    呈现列表选项,日常是那个用户很纯熟的挑选列表,比如州大概数字。
  • 使用 multiple=”multiple” 允许用户选取多少个挑选。



显示效果:

Bootstrap 22

有关bootstrap组件知识点目录:

响应式表格

透过把自由的 .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>

来得效果:

Bootstrap 23

 

按钮状态

Bootstrap 提供了激活、禁止使用等按钮状态的 class,上边将举行详细讲解。

相关文章