api地址：https://v3.bootcss.com/css/#forms

栅格参数：

bootstrap 其实 是把 网页等 分为 了 12分，bootstrap把 根据屏 幕 大小 把屏 幕分 为了 4个层 级，小于 768 像 素的 为超小屏 幕，大于 等于 768 像素的 为小屏 幕，大于 等于992像素的为中等屏幕，大于等于1200像素的则为大屏幕，相应的类前缀见图或查看官方文档。

栅格：
超小屏幕 手机 (<768px) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面显示器 (≥992px) .col-md-
大屏幕 大桌面显示器 (≥1200px) .col-lg-

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

<h4>h4. Bootstrap heading <small>Secondary text</small></h4>

<h5>h5. Bootstrap heading <small>Secondary text</small></h5>

<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

<p>...</p>

中心内容

通过添加 .lead 类可以让段落突出显示。

<p class="lead">...</p>

内联文本元素

Marked text

You can use the mark tag to <mark>highlight</mark> text.

被删除的文本

对于被删除的文本使用 <del> 标签。

<del>This line of text is meant to be treated as deleted text.</del>

无用文本

对于没用的文本使用 <s> 标签。

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本

额外插入的文本使用 <ins> 标签。

<ins>This line of text is meant to be treated as an addition to the document.</ins>

带下划线的文本

为文本添加下划线，使用 <u> 标签。

<u>This line of text will render as underlined</u>

小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。

<small>This line of text is meant to be treated as fine print.</small>

着重

通过增加 font-weight 值强调一段文本。

<strong>rendered as bold text</strong>

斜体

用斜体强调一段文本。

<em>rendered as italicized text</em>

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<p class="text-nowrap">No wrap text.</p>

改变大小写

通过这几个类可以改变文本的大小写。

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

基本缩略语

<abbr title="attribute">attr</abbr>

首字母缩略语

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

<address>

  <strong>Twitter, Inc.</strong><br>

  1355 Market Street, Suite 900<br>

  San Francisco, CA 94103<br>

  <abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<address>

  <strong>Full Name</strong><br>

  <a href="mailto:#">first.last@example.com</a>

</address>

引用

在你的文档中引用其他来源的内容。

默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

<blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

</blockquote>

列表

无序列表

排列顺序无关紧要的一列元素。

<ul>

  <li>...</li>

</ul>

有序列表

顺序至关重要的一组元素。

<ol>

  <li>...</li>

</ol>

内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list-inline">

  <li>...</li>

</ul>

描述

带有描述的短语列表。

<dl>

  <dt>...</dt>

  <dd>...</dd>

</dl>

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">

  <dt>...</dt>

  <dd>...</dd>

</dl>

overflow: hidden;
text-overflow: ellipsis;

代码

内联代码

通过 <code> 标签包裹内联样式的代码片段。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

变量

通过 <var> 标签标记变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

表格

基本实例

<table class="table">

  ...

</table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped">

  ...

</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">

  ...

</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

<table class="table table-hover">

  ...

</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">

  ...

</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作 

<!-- On rows -->

<tr class="active">...</tr>

<tr class="success">...</tr>

<tr class="warning">...</tr>

<tr class="danger">...</tr>

<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->

<tr>

  <td class="active">...</td>

  <td class="success">...</td>

  <td class="warning">...</td>

  <td class="danger">...</td>

  <td class="info">...</td>

</tr>
其他的看api吧，

api地址：https://v3.bootcss.com/css/#forms

几个单个的例子：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <!-- <div class=""> --><!-- col-md-4是左浮动，清除浮动加overflow:hidden就可以了 -->

        <div class="col-md-4">

          <div class="panel panel-default">

            <div class="panel-body">

              <table class="table">

              <caption>Optional table caption.</caption>

              <thead>

                <tr>

                  <th>#</th>

                  <th>First Name</th>

                  <th>Last Name</th>

                  <th>Username</th>

                </tr>

              </thead>

              <tbody>

                <tr>

                  <!-- <th scope="row">1</th> -->

                  <td>1</td>

                  <td>Mark</td>

                  <td>Otto</td>

                  <td>@mdo</td>

                </tr>

                <tr>

                  <th scope="row">2</th>

                  <td>Jacob</td>

                  <td>Thornton</td>

                  <td>@fat</td>

                </tr>

                <tr>

                  <th scope="row">3</th>

                  <td>Larry</td>

                  <td>the Bird</td>

                  <td>@twitter</td>

                </tr>

              </tbody>

            </table>

            </div>

          </div>

      </div>

      <div class="col-md-4">

           <div class="panel panel-default">

            <div class="panel-body">

              <table class="table">

              <caption>Optional table caption.</caption>

              <thead>

                <tr>

                  <th>#</th>

                  <th>First Name</th>

                  <th>Last Name</th>

                  <th>Username</th>

                </tr>

              </thead>

              <tbody>

                <tr>

                  <th scope="row">1</th>

                  <td>Mark</td>

                  <td>Otto</td>

                  <td>@mdo</td>

                </tr>

                <tr>

                  <th scope="row">2</th>

                  <td>Jacob</td>

                  <td>Thornton</td>

                  <td>@fat</td>

                </tr>

                <tr>

                  <th scope="row">3</th>

                  <td>Larry</td>

                  <td>the Bird</td>

                  <td>@twitter</td>

                </tr>

              </tbody>

            </table>

            </div>

          </div>

      </div>

   <!--  </div> -->

    <!-- 表格，面板，栅格 -->

    <!-- <div> -->

      <h1>h1. Bootstrap heading <small>Secondary text</small></h1>

      <h2>h2. Bootstrap heading <small>Secondary text</small></h2>

      <h3>h3. Bootstrap heading <small>Secondary text</small></h3>

      <h4>h4. Bootstrap heading <small>Secondary text</small></h4>

      <h5>h5. Bootstrap heading <small>Secondary text</small></h5>

      <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

    <!-- </div> -->

    <div>测试一下浮动结束</div>

    <div>

      <a class="btn btn-default" style="outline: none;" href="#" role="button">Link</a>

      <button class="btn btn-default" type="submit">Button</button>

      <input class="btn btn-default" type="button" value="Input">

      <input class="btn btn-default" type="submit" value="Submit">

      <!-- Standard button -->

      <button type="button" class="btn btn-default">（默认样式）Default</button>

      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

      <button type="button" class="btn btn-primary">（首选项）Primary</button>

      <!-- Indicates a successful or positive action -->

      <button type="button" class="btn btn-success">（成功）Success</button>

      <!-- Contextual button for informational alert messages -->

      <button type="button" class="btn btn-info">（一般信息）Info</button>

      <!-- Indicates caution should be taken with this action -->

      <button type="button" class="btn btn-warning">（警告）Warning</button>

      <!-- Indicates a dangerous or potentially negative action -->

      <button type="button" class="btn btn-danger">（危险）Danger</button>

      <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

      <button type="button" class="btn btn-link">（链接）Link</button>

      <p>

      <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

      <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>

      </p>

      <p>

        <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>

        <button type="button" class="btn btn-default">（默认尺寸）Default button</button>

      </p>

      <p>

        <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>

        <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>

      </p>

      <p>

        <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>

        <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

      </p>

    </div>

    <div>

      <div class="center-block" style="background-color: #eee;width: 1200px;">

      左右居中

      </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

  </body>

</html>
 

水平风格表单：标签在左，控件在右

1、在<form>元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

内联表单：控件一行显示

在<form>元素中添加类名“form-inline”

表单控件

select：<select multiple class="form-control"> 选择多个

textarea： <textarea class="form-control" rows="3"></textarea>

radio，checkbox：div包着label包着input

<div class="checkbox">

    <label>

      <input type="checkbox" value="">

      记住密码

    </label>

  </div>

radio，checkbox：水平排列

div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input

禁用控件：在控件上添加disabled属性

<input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>

验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon

表单提示信息：

在form-group容器后加一个span，添加类名.help-block

button：四种方式，bootstrap用button实现，建议用button和a标签来制作按钮

<input type="button">

<input type="reset">

<input type="submit">

<button></button>

button样式

.btn

.btn-default

大小：

.btn-lg

.btn-sm

.btn-xs

块状按钮：按钮充满整个容器，没有padding和margin .btn-block

禁用按钮：添加类.disabled 或者添加属性disabled=“disabled”

 
 
 

bootstrap常用知识点总结的更多相关文章

  1. DB2_SQL_常用知识点&实践

    DB2_SQL_常用知识点&实践 一.删除表中的数据(delete或truncate) 1 truncate table T_USER immediate; 说明:Truncate是一个能够快 ...

  2. JAVA常用知识点及面试题总结

    1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...

  3. HTML常用知识点代码演示

    1 HTML部分常用知识点 <!-- 版本声明 --> <!DOCTYPE html> <!-- 唯一根元素 --> <html> <!-- 对网 ...

  4. Java 常用知识点

    Java 常用知识点 1.日期格式化 SimpleDateFormat Date date=new Date(System.currentTimeMillis()) ; SimpleDateForma ...

  5. Less常用知识点

    上篇文章介绍了如何安装Less,我们将所有东西都写在.less里面,最后通过命令将.less转换成.css文件,就可以放入到项目里用了.今天了解一些less常用知识点. 1.变量:声明两个变量,一个是 ...

  6. BIOS备忘录之EC常用知识点

    BIOS工程师眼中常用的EC知识点汇总: EC的硬件架构 EC硬件结构上主要分为两部分:Host Domain和EC Domain Host Domain就是通过LPC与CPU通信的部分(LPC部分需 ...

  7. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

  8. YII2常用知识点总结

    YII2常用知识点总结 (一)总结性语句 (1)经常看看yii源码比如vendor\yiisoft\yii2\web这个目录(很重要)下的文件中的方法(这些文件中的公共方法,大致看了下基本上都可以通过 ...

  9. CSS3常用知识点

    CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/ .attr2 a[class~="kawa& ...

随机推荐

  1. MathType二次偏导怎么表示

    求导以及求偏导运算在数学中是很重要的一个部分,尤其是在高等数学中,基本都由函数的导数与偏导组成,很多公式定理也是关于这方面的,如果少了这一部分,数学将会黯然失色.因此在文档中涉及到这些内容时,必然会少 ...

  2. 部署mysql后，无法设置用户远程登陆（%只所有用户，不可以，只能给指定的ip？）

    MySQL允许远程访问的设置 1.注释bind-address = 127.0.0.1. 代码如下: >sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 将 ...

  3. C#------SortedLIst键值对的使用方法

    方法: SortedList sf = new SortedList(); sf.Add(, "广州"); sf.Add(, "江门"); sf.Add(, & ...

  4. 剑指 offer set 28 实现 Singleton 模式

    singleton 模式又称单例模式, 它能够保证只有一个实例. 在多线程环境中, 需要小心设计, 防止两个线程同时创建两个实例. 解法 1. 能在多线程中工作但效率不高 public sealed ...

  5. 剑指 offer set 22 数组中的逆序数

    总结 1. 题目为归并排序的变形, 不过我完全没想到 2. 在归并排序进行字符组 merge 时, 统计逆序数. merge 后, 两个子数组是有序的了, 下次再 merge 的时候就能以 o(n) ...

  6. std::unique_lock

    /*与Mutex RAII相关,方便线程上锁,相比std::lock_guard提供了更好的上锁解锁控制,反正我是没看出来也是在构造时上锁,在析构时解锁,感觉和lock_gurad大差不差都是在线程函 ...

  7. Xamarin绑定微信SDK 实现分享功能

    从开始做这一块的工作开始,就开始找各种的资料,最后还是老老实实的去看官方文档. 对于Xamarin.Android的绑定属于纯jar的绑定,这个难度较小,添加Bindings Library,将lib ...

  8. 11.Curator扩展库

        Recipes组件包含了丰富的Curator应用的组件.但是这些并不是ZooKeeper Recipe的全部.大量的分布式应用已经抽象出了许许多多的的Recipe,其中有些还是可以通过Cura ...

  9. org.hibernate.ObjectDeletedException: deleted object would be re-saved by cascade 解决方案 (网络转载)

    前提是配置了cascade=all,依然报这种错误,其实出现这个错误的大多数情况根本不是像网上的帖子所说的是什么级联删除的问题,而且hibernate session关于实体生命周期操作的原因,这里明 ...

  10. ORACLE安装（12c-Redhat6.5）

    Oracle安装(12c-Redhat6.5) Redhat6.5系统准备 / 10G SWAP 4G /boot 200M /HOME 4G /usr 8G /var 4G /u01 Preinst ...