二赛君 | Kaspar.s

Studies serve for delight,for ornament,and for ability! ----Francis Bacon

【在线学习系列】Bootstrap 3

概览

1 HTML5 文档类型

Bootstrap使用html5和css属性,在文档起始需要声明文档类型Doctype,包括以下代码

<!DOCTYPE html>
<html>
...
</html>

2 移动设备优先

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, 
maximum-scale=1.0, 
user-scalable=no">

 

加入viewport标签,width控制设备的宽度。

device-width不同设备不同尺寸,initial-scale=1.0 ,无缩放

user-scalable=no  禁用缩放功能,保证用户设备看到的是原网页尺寸

maximum-scale=1.0 无缩放

3 响应式图像

<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}

图像添加 img-responsive calss 支持响应式布局

css属性如下 包括内嵌display 自动height  100宽度

4 容器

<div class="container">
...
</div>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

外边距margin由浏览器决定


网格系统

响应式网站系统随屏幕视口尺寸变化而变化,系统最多分为12列。

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

创建行 .row

创建列,如创建三个相等的列,使用 .col-xs-4

超小设备手机(<768px)                 .col-xs-

小型设备平板电脑(>=768px)          .col-sm-

中型设备台式电脑(>=992px)          .col-md-

大型设备台式电脑(>=1200px)         .col-lg-

但最后的列和数量为12

其基本结构为

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>      
</div>
<div class="row">...</div>
</div>

列偏移

使用   .col-md-offset-*

比如有<div class=”col-md-6″>..</div>,我们将使用 .col-md-offset-3 class 来居中这个 div。

列嵌套

在已有的列中添加组 .col-**-**,但应注意,总和为12


表格

标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。
描述
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
联合使用所有表格类

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格:

描述
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

图片

Bootstrap 提供了三个可对图片应用简单样式的 class:

.img-rounded:添加 border-radius:6px 来获得图片圆角。

.img-circle:添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

字体图标

<span class="glyphicon glyphicon-search"></span>

替换 glyphicon-search ,使用不同图标。

点击这里在线定制图标

可以将图标放置在按钮里,有链接或无链接

<p>Header icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-header"></span> Header
</button>
</p>
<p>Header icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-header"></span> Header
</a>
</p>

下拉菜单

通过 class dropdown 实现。

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>

使用class dropdown-header 向下拉菜单的标签区域添加标题。

<li role="presentation"  class=“dropdown-header”> 下拉菜单说明 </li> 

 

学,无止境。

在线学习系列文章,Bootstrap 3

    文章地址:https://www.ersaijun.cn/blog/2016/08/05/zaixianxuexixiliebootstrap-3/

     二赛君

    2016.08

点赞

Leave a Reply

Your email address will not be published. Required fields are marked *