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

<!--导入css-->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- 导入jquery-->
    <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
    <!--导入.js -->
    <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 元素都将接受这些校验状态的样式。

 

 

1.6.8按钮

class = btn 将任何东西变成按钮 须要配合 btn-default

1.6.9尺寸

须要让按钮具备不一样尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就能够得到不一样尺寸的按钮

1.6.10 图片的形状

响应式图片!随着窗体大小改变大小 经过为 <img> 元素添加如下相应的类，可让图片呈现不一样的形状。

1.6.11 辅助类

一.情境文本颜色
经过颜色来展现意图，Bootstrap 提供了一组工具类。这些类能够应用于连接，而且在鼠标通过时颜色能够还能够加深，就像默认的连接同样。

二 情景背景颜色

和情境文本颜色类同样，使用任意情境背景色类就能够设置元素的背景。连接组件在鼠标通过时颜色会加深，就像上面所讲的情境文本颜色类同样。

1.6.12 浮动

1.6.13 可见类

1.7 组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能

1.7.1 图片使用Glyphicons字体图标

1.7.2 下拉菜单

1.7.3 按钮组

把一系列的.btn按钮放入.btn-group。

btn-group 内部嵌套 btn

1.7.4 toolbar 按钮工具栏

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就能够作成更复杂的组件

1.7.5 尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每一个按钮都赋予尺寸类了，若是包含了多个按钮组时也适用。

1.7.6 标签式导航栏

1.7.7胶囊导航

1.7.8导航条

1.7.9 路径导航 面包屑导航

1.7.10 标签

1.7.11徽章 提示信息

1.7.12 进度条

1.7.13 well