bootstrop总结上

一、 什么是Bootstrap？

 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。 Bootstrap 是基于 HTML、CSS、JavaScript的，它在jQuery的基础上进行了更为个性化和人性化的完善， 形成一套自己独有的网站风格，并兼容大部分jQuery插件。

二、Bootstrap的优势：      Bootstrap简洁灵活，使得 Web 开发更加快捷。  其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。

三、Bootstrap的使用方法   

 1. 在项目页面中引入            jquery.3.1.1.js          bootstrap.min.js 文件          bootstrap.min.css 文件   

 2.特别注意：文件的引用顺序，            query.3.1.1.js 要放到最上面，其次再引入另外两个文件   

 3.在制作HTML页面的时候就可以直接引用了！

四、全局样式  (一)bootstrap全局显示、排版和链接    

1、全局显示    Bootstrap 3使用 body {margin: 0;} 来移除 body 的边距。

2、排版  使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

3、链接样式：                  通过属性 @link-color 设置全局链接的颜色。      容器container        Bootstrap 3 的 container class 用于包裹页面上的内容。        Bootstrap对排版、代码的增强功能    标题： Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式  

1、内联子标题或者class="small"  

 2、段落  为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗 、行高更高的文本(二)文本对齐风格以及特殊处理:  1.强调  HTML 的默认强调标签（设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。

  2.缩写  HTML元素提供了用于缩写的标记，比如 WWW 或 HTTP。  Bootstrap 定义元素的样式为显示在文本底部的一条虚线边框，  当鼠标悬停在上面时会显示完整的文本（只要您为title 属性添加了文本）。  为了得到一个更小字体的文本，只要把 .initialism 到就可以了。  

3.地址（Address）：  使用

标签，您可以在网页上显示联系信息。  由于

默认为 display:block;，您需要使用 �标签来为封闭的地址文本添加换行。    列表:  Bootstrap 支持有序列表、无序列表和定义列表。      有序列表：有序列表是指以数字或其他有序字符开头的列表。      无序列表： 可以使用 class .list-unstyled 来移除样式(开头的数字)。也可以通过使用 class .list-inline 把所有的列表项放在同一行中。      定义列表：可以使用 class dl-horizontal 把

行中的属于与描述并排显示。表格 

 1. 基本的表格        class="table" 只带有内边距（padding）和水平分割的基本表  

2.可选的表格类  （条纹表格）  通过添加 class="table table-striped"，将在  内的行上看到条纹  （边框表格）  通过添加 class="table table-bordered"，将在  内的行上看到边框  （精简表格）  通过添加 class="table table-condensed"，实现精简表格  （上下文类表格）  上下文类允许改变表格行或单个单元格的背景颜色  值：  

 .active 对某一特定的行或单元格应用悬停颜色 

 .success 表示一个成功的或积极的动作    

  .warning  表示一个需要注意的警告    

  .danger  表示一个危险的或潜在的负面动作  这些类可被应用到 、 或 。

    (三)代码的增强功能        Bootstrap 允许您以两种方式显示代码       

 第一种是标签，内联显示代码        第二种是

标签。如果代码需要被显示为一个独立的块元素或者代码有多行，则应该使用

标签。注意：使用

和标签时，确保开始和结束标签使用了 unicode 变体： < 和 >。    (四)Bootstrap对表单的增强功能      表单    表单布局：Bootstrap 提供了下列类型的表单布局：        1、垂直表单（默认)  向父元素

添加 role="form"。          把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。          向所有的文本元素、和 添加 class ="form-control"。

2、内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，

向 标签添加 class="form-inline"。

3、水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。

如需创建一个水平布局的表单，请按下面的几个步骤进行：

向父元素 添加 class .form-horizontal。

把标签和控件放在一个带有 class .form-group 的

中。

向标签添加 class .control-label。

注意：

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。

在使用内联表单时，需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。