Bootstrap框架快速上手攻略

前言

概念

1.选择器

.xx  类选择器
#xx  id选择器
xxx  标签选择器

2.缩写
div  division 划分,图层
ul unordered lists 无序列表
ol ordered lists 有序列表
li list item 列表项目

3.视口

Viewport是指手机端可见窗口(去掉浏览器导航栏,菜单栏后的窗口)。在添加视口代码前，设备会按照桌面电脑分辨率去渲染整个页面，然后再按照比例显示到手机上。添加视口后，会强制按照手机屏幕分辨率渲染页面。

第一章 基础及布局

一.栅格系统

定义:一系列的行和列构建的布局,随着屏幕放大,最多展示12个列
1.容器
固定布局 div class = container 居中容器
流式布局 div class = container-fluid 横全屏容器

2.行与列
a.行
div class = row

b.列 class = col-
第一列 div class=col-lg-3 (每个占3列) n=3
第二列 div class=col-lg-3
第三列 div class=col-lg-3
第四列 div class=col-lg-3
网页显示就是4列了.
col * n = 12

c.栅格参数:
 col-lg-3: lg large-->当屏幕大于1200px时采用 电脑
 col-md-3: md middle-->992~1200px
 col-sm-3: sm small-->768~992px             平板
 col-xs-3: xs extremely small-->小于768px 手机
 
d.多屏适配写法:

<div class="col-lg-3 col-sm-4 col-xs-6"></div>

二.辅助类

文本颜色,及背景,有助于统一整体样式
文本:class = text-

    <h1 class="text-primary">主要</h1>
    <h1 class="text-success">成功</h1>
    <h1 class="text-warning">警告</h1>
    <h1 class="text-danger">危险</h1>
    <h1 class="text-info">信息</h1>
    <h1 class="text-muted">暗哑</h1>

背景:class = bg-  

    <h1 class="bg-primary">主要</h1>
    <h1 class="bg-success">成功</h1>
    <h1 class="bg-warning">警告</h1>
    <h1 class="bg-danger">危险</h1>
    <h1 class="bg-info">信息</h1>
    <h1 class="bg-muted">暗哑</h1>

关闭按钮图标 class = close

    <button class="close"><span>×</span></button>
    <input class="close" type="button" value="关闭">

三角图标^ class = caret

<span class="caret"></span>

快速浮动 div,class = pull-left ,pull-right 浮动会将块元素转化为行内元素!!

补充:

行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列-->不管多少内容,始终占满一行
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行-->有多少内容占多少空间

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

4.行内元素转换为块级元素
display:block (字面意思表现形式设为块级)如果不想让父元素收到快速浮动的影响,要给父元素加上:class = clearfix

居中：

块元素居中 div,class = center-block 
文字居中div,class = text-center
垂直居中 自定义样式!

 <style>
	#div1{
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
</style>

举例：
<div id="div1" class="center-block text-center" style="width: 500px;border: 1px solid red;">
    块元素居中
</div>
translate(-50%,-50%):元素自己的50%大小,向左平移,向上平移
显示和隐藏 div,class = visible-lg


表格 table,class = table （响应式表格）
只需要增加table类,即可实现表格美化效果
1.斑马线 class = table-striped
2.鼠标悬停变色 class = table-hover
3.边框 class = table-bordered
4.颜色 active success warning danger info 注意:此处没有primary
如:tr,class = danger

表格内垂直居中 
class = vertical-align:middle

三.列表

<ul></ul>
ul,class = list-group      列表
li,class = list-group-item 列表每一项

<span class="badge"></span> 徽章

li,class = list-group-item-success/danger/warning 列表每一项颜色

四.表单

1.垂直样式表单(默认):form 或 form-vertical
<lable for="xxx"></lable> for和id一定做要关联

表单分组:class = form-group 
表单项:class = form-control placeholder="请输入用户名"
复选框:div class = checkbox
单选框:div class = radio
下拉列表:select class = form-control
圆角:style border-radius: 10px;

五.按钮

1.<button type="submit" class="btn btn-primary">提交</button>

class = 
btn 按钮
btn-primary/success/... 按钮颜色 
btn-block 按钮占满一行


2.水平样式表单
a.给form增加一个form-horizontal类

谷歌浏览器F12可以临时修改样式.

表单补充:
校验状态
成功:has-success
失败:has-error

第二章 JavaScript组件

添加额外图标
1.在form-group对应的标签里增加 has-feedback类
2.在input输入框的后面,创建图标 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
*图片类属性名去bootstrap中文网复制名称使用:has-feedback


六.图片:
响应式图片 class="img-responsive"


图片的形状 
圆角图片 img-rounded
圆形的图片 img-circle
缩略图 img-thumbnail


超链接缩略图 a,class = thumbnail


七.按钮
1.三种方式创建按钮
1.
<button type="button" class="btn btn-primary">button按钮1</button>
2.
<input type="button" class="btn btn-success" value="input按钮">
3.
<a href="#" class="btn btn-danger">a按钮</a>


2.
样式 class = btn
颜色 class = btn-primary/success/danger/...
尺寸 
大  btn-lg
中  btn-sm
小  btn-xs
block块级按钮  btn-block 占满整个一行


3.按钮组 class = btn-group


4.激活状态和禁用状态
激活:active
禁用:disabled


八.下拉菜单 class = dropdown-menu
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">php</a> </li>
<li><a href="#">java</a> </li>
<li><a href="#">js</a> </li>
<li><a href=