网页布局的两种容器
布局的两种容器的类样式名说明
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分页容器
«向左的两个箭头
»向右的两个箭头
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值