web前端基础笔记6Bootstrap

网页布局的两种容器

布局的两种容器的类样式名说明

container表示固定宽度，在不同的设备上有不同的固定宽度

container-fluid在所有的设备上都是以100%占全屏

说明：

container固定宽度随着浏览器变化而改变，到一定程度就变为100%宽度。

container-fluid，100%宽度 ，无论浏览器页面什么样，始终100%宽度。

基本写法

栅格系统描述                                                                      类似于表格

.container或表示栅格系统的两种容器，一般放在最外面。<table>

或.container-fluid例如：上述的div，都属于最外层.

.row表示容器中的一行，一行最多有12列                            <tr>

.col-xx-n 这一行在某种设备上占多少列                                          <td>

lg 大型设备，电视 col-lg-3 在大型设备上占3列

md 中型设备，电脑 col-md-6 在中型设备上占6列

sm 小型设备，平板 col-sm-2 在小型设备上占2列

xs 微型设备，手机 col-xs-8 在微型设备上占8列

n 表示这一行的一个格占几列，一行最多12列

格系统中类的小结

类样式名作用

.container不同的设备上不同的固定大小

.container-fluid所有的设备上100%

.row表示一行，可以省略

.col-xs-n在微型设备上占n列

.col-sm-n在小型设备上占n列

.col-md-n在中型设备上占n列

.col-lg-n在大型设备上占n列

.hidden-lg/md/sm/xs在指定设备上隐藏

.visible-lg/md/sm/xs只在指定的设备上显示

表单

格式：

<label for="属性值">文本值</label>

<label> 标签的 for 属性应当与相关元素如：input的 id 属性相同。

这样就可以实现自动将焦点转到和input标签相关的表单控件上.

表格使用class="center-block"

标题使用class="text-center"

性别使用class="form-inline"

select使用class="form-control"

与表格有关的类样式

表格的样式类名，class属性值

基本实例table

条纹状表格，就是隔行颜色有点类似斑马纹table-striped

带边框的表格table-bordered

鼠标悬停table-hover

实例: class="table table-striped table-striped table-hover"

 

表格中的状态类

class属性值描述

active(白灰)鼠标悬停在行或单元格上时所设置的颜色

success(浅绿色)标识成功或积极的动作，浅绿色

info(蓝色)标识普通的提示信息或动作

warning(泛黄)标识警告或需要用户注意

danger(红色)标识危险或潜在的带来负面影响的动作

导航条的组成

整个导航条就是一个nav标签，nav可以理解为一个div。只不过这里语义化了，nav本身就是导航意思。

导航条的类样式描述

navbar navbar-default默认的颜色为白色

navbar-header指定商标和开关的样式，让它在手机上更好的显示

collapse navbar-collapse可以折叠的所有项

dropdown下拉菜单

navbar-left左对齐

navbar-right右对齐

navbar-inverse将颜色反转，其实就是设置成黑色

开头相关的属性

data-表示这有一个事件激活，会产生相应的功能。不能删除

aria-给残障人士使用，可以删除

sr-only屏幕阅读的功能，给残障人士使用，可以删除

分页效果

分页组成：

分页类描述

pagination分页容器

&laquo;向左的两个箭头

&raquo;向右的两个箭头

disabled禁用状态

active激活状态

对话框的组成

modal-dialog模态框的容器

modal-content模态框的内容

modal-header模态框的头部

modal-body模态框的主体

modal-footer模态框的脚部

modal-title头部中的标题

打开对话框的属性

按钮上的属性描述

data-toggle="modal"打开模态框的功能

data-target="#id值" 或 =".类名"指定需要打开的id或类名来打开模态框

data-dismiss="modal"关闭模态框的功能

组成的类样式名

类样式名字描述

carousel slide轮播图的容器

carousel-indicators中间的小圆点

carousel-inner要轮播的图片

carousel-caption图片的名字

carousel-control向左向右按钮

相关的属性

属性名作用

data-ride="carousel"指定当前是一个轮播图，加载时自动运行

data-interval="2000"间隔的时间间隔，单位是毫秒

data-target="#myPic"指定轮播图div容器的id值