Bootstrap学习笔记（一）

一.什么是Bootstrap？

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。——《百度百科》

1.Bootstrap：下载地址

2.准备工作

1.响应式布局：

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

3.引入jquery

 <script src="js/jquery-1.12.4.min.js"></script>

2.引入文件：

<link href="dist/css/bootstrap.min.css" rel="stylesheet">  <script src="dist/js/bootstrap.min.js"></script>

二.布局容器类样式：

1..container 和 .container-fluid

.container 固定宽度并且具有响应式。

<div class="container">    <h1> Bootstrap</h1>    <p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，        它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司        ）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，        也是基于Bootstrap源码进行性能优化而来。</p></div>

.container-fluid 自由宽度（100%宽度）

<div class="container-fluid">    <h1> Bootstrap</h1>    <p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，        它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司        ）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，        也是基于Bootstrap源码进行性能优化而来。</p></div>

2.标题样式.h1~.h6

 <span class="h1">我是h1</span>    <span class="h2">我是h2</span>    <span class="h3">我是h1</span>

3.文本对齐： .text-left .text-center .text-right .text-justify

.text-left 左对齐
.text-center 局中
.text-right 右对齐
.text-justify 两端对齐

<h1 class="text-left">Bootstrap</h1>    <h1 class="text-center">Bootstrap</h1>    <h1 class="text-right">Bootstrap</h1>    <h1 class="text-justify">Bootstrap</h1>

4. 样式列表：.list-unstyled(无符号) .list-inline(行内块)

.list-unstyled(无符号)

<ul class="list-unstyled">        <li>Bootstrap</li>        <li>Bootstrap</li>        <li>Bootstrap</li>        <li>Bootstrap</li>    </ul>

.list-inline(行内块)

<ul class="list-inline">        <li>Bootstrap</li>        <li>Bootstrap</li>        <li>Bootstrap</li>        <li>Bootstrap</li>    </ul>

5.表格样式 .table .table-striped .table-bordered .table-hover .table-condensed

.table

<table class="table">        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>    </table>

.table-striped 渐变颜色

<table class="table table-striped" >        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>    </table>

.table-bordered 带边框的表格

<table class="table-bordered table " >        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>    </table>

.table-hover 鼠标事件变色

<div class="container"><br>    <table class="table-hover table " >        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>    </table>

.table-condensed 紧凑型

 <table class="table-condensed table " >        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>    </table>

6.行或单元格背景色 .active .success .info .warning .danger

.active 当前颜色
.success 成功颜色
.info 信息颜色
.warning 警告颜色
.danger 危险颜色

 <table class=" table" >        <tr>            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr >        <tr class="active">            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr >        <tr class="success">            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr class="info" >            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr class="warning" >            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>        <tr class="danger" >            <td>Bootstrap</td>            <td>Bootstrap</td>        </tr>    </table>

文集：前端知识扩展