目录
bootstrap笔记
布局容器
bootstrap为页面内容和栅格系统提供了一个container
容器
第一、
container
类用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>
第二、
container-fluid
类用于宽度100%,占据全部视口(viewport)的容器
<div class="container-fluid">
...
</div>
栅格系统
简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
“行(row)”必须包含在 .container
(固定宽度)或 .container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
通过“行(row)”在水平方向创建一组“列(column)”。
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
类似 .row
和 .col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin
也可以用来创建语义化的布局。
通过为“列(column)”设置 padding
属性,从而创建列与列之间的间隔(gutter)。通过为 .row
元素设置负值 margin 从而抵消掉为 .container
元素设置的 padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4
来创建。
如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*
不存在, 也影响大屏幕设备。
媒体查询
超小屏幕 手机(<768px):`.col-xs-`
小屏幕 平板 (≥768px):`.col-sm-`
中等屏幕 桌面显示器 (≥992px):`.col-md-`
大屏幕 大桌面显示器 (≥1200px):`.col-lg-`
代码示例
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
效果图:
注:如果在一个 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
列偏移
使用 类可以将列向右侧偏移。 这些类实际是通过使用 选择器为当前元素增加了左侧的边距(margin)。 例如, 类将 元素向右侧偏移了4个列(column)的宽度。.col-md-offset-**
.col-md-offset-4
.col-md-4
代码示例:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</div>
效果图
嵌套列
可以在col
内再写一个row
用以实现效果
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
效果图
列排序
通过使用 和 类就可以很容易的改变列(column)的顺序。.col-md-push-*
.col-md-pull-*
代码示例:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
效果图
排版
标题:<h1>标题</h1>...<h6>标题</h6>
副标题:<h1>标题<small>副标题</small></h1>...<h6>标题</h6>
文本:<p>文本</p>
中心内容:<p class="lead">文本</p>
内联文本元素:
被删除的文本:<del>被删除的内容</del>
无用文本:<s>无用文本</s>
插入文本:<ins>插入文本</ins>
带下划线的文本:<u>带下划线的文本</u>
文本对齐:<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
斜体:<em>text</em>
着重:<strong> text</strong>
大小写:<p class="text-lowercase">Lowercased text.</p> ##小写
<p class="text-uppercase">Uppercased text.</p> ## 大写
<p class="text-capitalize">Capitalized text.</p>## 首字母大写
表格
<table class="table table-hover table-bordered"> <!-- 表格 鼠标悬停在表格上做出响应 表格边框-->
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>mark</td>
<td>19</td>
<td>male</td>
</tr>
<tr>
<th>1</th>
<td>mark</td>
<td>19</td>
<td>male</td>
</tr>
<tr>
<th>1</th>
<td>mark</td>
<td>19</td>
<td>male</td>
</tr>
<tr>
<th>1</th>
<td>mark</td>
<td>19</td>
<td>male</td>
</tr>
<tr>
<th>1</th>
<td>mark</td>
<td>19</td>
<td>male</td>
</tr>
</tbody>
</table>
表单
单独的表单控件会被自动赋予一些全局样式。 所有设置了 类的 、 和 元素都将被默认设置宽度属性为 。 将 元素和前面提到的控件包裹在 中可以获得最好的排列。.form-control<input><textarea><select>width: 100%;label.form-group
代码示例:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
效果图
按钮
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
效果图
图片
响应式图片
通过为图片添加 类可以让图片支持响应式布局
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
效果图
辅助类
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
内容块居中
<div class="center-block">...</div>
清除浮动
<div class="clearfix">...</div>
显示或隐藏内容
<div class="show">...</div> 显示
<div class="hidden">...</div> 隐藏