bootstrap框架的使用布局
布局容器
bootstarp需要为页面内容和栅格系统包裹一个.container容器,bootstrap预先定义好了这个类
使用方法
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
栅格系统
栅格系统
指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局,然后bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为12列
超小屏幕(小于768px) | col-xs-份数 |
小屏设备(>=768px ~ <992px) | col-sm-份数 |
中等屏幕(>= 992px ~ <1200px) | col-md-份数 |
宽屏设备(>=1200px) | col-lg- 份数 |
- “行(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-*
不存在, 也影响大屏幕设备。
表格
table标签中的表格样式
(1).table
:基础表格
(2).table-striped
:斑马线表格(灰色和白色交替)
(3).table-bordered
:带边框的表格
(4).table-hover
:鼠标悬停高亮的表格(一整行)
(5).table-condensed
:紧凑型表格(行与行之间紧凑)
tr、th、td样式,控制了行的不同背景颜色
(1).active
:将悬停的颜色应用在行或单元格上
(2).success
:表示成功的操作(绿色)
(3).info
:表示信息变化的操作(蓝色)
(4).warning
:表示一个警告的操作(黄色)
(5).danger
:表示一个危险的操作(红色)
表单
单中常见的元素主要包括:
- 文本输入框
- 下拉选择框
- 单选按钮
- 复选按钮
- 文本域和按钮等
在Bootstrap框架中,通过定制了一个类名
form-control
,也就是说,如果这几个元素使用了类名“form-control”
,将会实现一些设计上的定制效果。
水平表单
Bootstrap框架默认的表单是垂直显示风格,在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
在元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
按钮
class | 说明 |
---|---|
.btn | 添加基本样式 |
.btn-default | 默认/标准按钮 |
.btn-primary | 原始按钮样式(未被操作) |
.btn-success | 表示成功的动作 |
.btn-info | 用于要弹出信息的按钮 |
.btn-warning | 需要谨慎操作的按钮 |
.btn-danger | 危险动作的按钮操作 |
.btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
.btn-lg | 大按钮 |
.btn-sm | 小按钮 |
.btn-xs | 超小按钮 |
.btn-block | 块级按钮(拉伸至父元素100%的宽度) |
.active | 按钮被点击 |
.disabled | 禁用按钮 |
组件
Bootstrap组件是Bootstrap框架的核心之一
常用的组件:
- Icon图标
- 下拉菜单
- 输入框
- 按钮
图标
小图标
图标(icon)是一个优秀网站不可缺少的一组元素,小图标的点缀可以使网站瞬间提升一个档次
Bootstrap给我们提供了250种小图标,这些小图标可以作用在内联元素上,给网页增加更多活力
下拉菜单
类 | 描述 |
---|---|
.dropdown | 指定下拉菜单,下拉菜单都包裹在 .dropdown 里 |
.dropdown-menu | 创建下拉菜单 |
.dropdown-menu-right | 下拉菜单右对齐 |
.dropdown-header | 下拉菜单中添加标题 |
.dropup | 指定向上弹出的下拉菜单 |
.disabled | 下拉菜单中的禁用项 |
.divider | 下拉菜单中的分割线 |
<div class="dropdown open"> <!-- open控制菜单收缩展开-->
<button class="btn btn-default" data-toggle="dropdown" >
Dropdown <span class="caret"></span> <!-- 向下小三角-->
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li> <!-- 分界线-->
</ul>
</div>
输入框
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br/>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容" >
<span class="input-group-addon" >百度一下</span>
</div>
按钮
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容">
<span class="input-group-btn"> <!-- 容易出错点:写成input-group-addon-->
<button class="btn btn-primary" type="button">百度一下</button>
</span>
</div>