bootstrap

中文配置： https://v3.bootcss.com/

一.bootstrap配置

HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 1.引入CSS配置 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 2.jquery库，同时加载该库必须在加载bootstrap.min.js之前 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 3.加载bootstrap的核心js库 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">

 

二、组件

1.Glyphicons 字体图标

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

 

2.按钮（预定义样式）

 

<button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-primary">primary文字描述</button> <button type="button" class="btn btn-info">info信息</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-warning">warning警告</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">链接</button>

3.尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

<button type="button" class="btn btn-default btn-lg">大按钮</button> <button type="button" class="btn btn-primary btn-sm">小按钮</button> <button type="button" class="btn btn-success btn-xs">超小按钮</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-default btn-lg btn-block">大按钮</button>

链接（<a>）元素

为基于 <a> 元素创建的按钮添加 .disabled 类。

<a href="#" class="btn btn-primary btn-lg disabled" role="button">a按钮</a> <input class="btn btn-primary" type="button" value="input">

 

4.响应式图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类

<img src="imgs/01.jpg" class="img-responsive center-block">

 

 

5.图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="imgs/06.jpg" class="img-circle"> <img src="imgs/01.jpg" class="img-thumbnail"> <img src="imgs/01.jpg" class="img-rounded>

 

 

6.情境文本颜色

<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>

 

 

7.情境背景色

<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>