Bootstrap

1.bootstrap

1.1bootstrap概述

bootstrap简介：
   bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
boostrap特点
   1 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：
   2 所有的主流浏览器都支持 bootstrap。
   Internet Explorer Firefox Opera Google Chrome Safari
   3 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
   4 响应式设计：bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

1.2响应式的页面

bootstrap的使用步骤：
1.下载bootstrap
http://www.bootcss.com/
2.导入bootstrap.css文件
3.导入jquery.js
4.导入bootstrap.js

<link rel="stylesheet" href="css/bootstrap.min.css" />
   
   <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
   
   <script type="text/javascript" src="js/bootstrap.min.js" ></script>
5.导入支持移动设备支持缩放其实是1.0
   <meta name="viewport" content="width=device-width, initial-scale=1">

6.将所有的内容放到布局容器中
   .container 类用于固定宽度并支持响应式布局的容器。
   <div class="container">
       ...
   </div>
   .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
   <div class="container-fluid">
       ...
   </div>
   测试1: 直接写container显示不全
   <div class="container">
              <div style="border: 1px solid red;">111111</div>
   </div>

1.3 bootstrap的组成

1.全局css的样式

2.组件

3.js插件

1.4栅格系统

1.4.1什么是栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。注意: Bootstrap将每一行分成12份! Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。

注意：

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

1.4.2媒体查询功能

1.5 排版

1.5.1 标题

标题: HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

1.5.2Mark标签

1.5.3对齐

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

1.5.4 表格

table 表格全屏

table-striped 表格隔行变色斑马线效果

table-bordered 边框

table-hover 悬浮变色

1.5.5 行状态

1.6表单

元素都将被默认设置宽度属性为 width: 100%;将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

1.6.1 基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

水平表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

特殊符号金额输入框

复选框和单选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

静态控件

1.6.7校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，
添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。