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. Js 的几种去重(一维)

    写的几种数组去重方法: 第一种: [利用排序方法,然后比较当前元素与下一个元素是否相等] function repeat1(arr) { var length = arr.length; var re ...

  2. 第十四篇：Apriori 关联分析算法原理分析与代码实现

    前言 想必大家都听过数据挖掘领域那个经典的故事 - "啤酒与尿布" 的故事. 那么,具体是怎么从海量销售信息中挖掘出啤酒和尿布之间的关系呢? 这就是关联分析所要完成的任务了. 本文 ...

  3. uilabel 和uitextview 自适应大小

    本文转载至 http://blog.csdn.net/liulichao20/article/details/8957752 分类: ios2013-05-21 22:06 321人阅读 评论(0)  ...

  4. java基础---->final关键字的使用

    这里介绍一些java基础关于final的使用,文字说明部分摘自java语言规范.心甘情愿这四个字,透着一股卑微,但也有藏不住的勇敢. Final关键字的说明 一.关于final变量规范说明 .A fi ...

  5. 一句css代码让网站变灰

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...

  6. LAMP集群项目五 项目备份

    1.打包到本地 2.推送到备份服务器 3.删除若干天前的备份 ip=`awk '/IPADDR/' /etc/sysconfig/network-scripts/ifcfg-eth0 |awk -F ...

  7. LeetCode 笔记系列16.3 Minimum Window Substring [从O(N*M)， O(NlogM)到O(N)，人生就是一场不停的战斗]

    题目:Given a string S and a string T, find the minimum window in S which will contain all the characte ...

  8. Java调用http保留访问状态

    package com.coracle; import com.coracle.yk.xframework.util.yunTongXun.HttpRequest; import java.io.*; ...

  9. 160509、Java过滤器与SpringMVC拦截器之间的关系与区别

    今天学习和认识了一下,过滤器和SpringMVC的拦截器的区别,学到了不少的东西,以前一直以为拦截器就是过滤器实现的,现在想想还真是一种错误啊,而且看的比较粗浅,没有一个全局而又细致的认识,由于已至深 ...

  10. python--常用的十进制、16进制、字符串、字节串之间的转换

      进行协议解析时,总是会遇到各种各样的数据转换的问题,从二进制到十进制,从字节串到整数等等 整数之间的进制转换: 10进制转16进制: hex(16)  ==>  0x10 16进制转10进制 ...