前端系列
一、HTML5
二、CSS
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3
BootStrap
中文网: http://www.bootcss.com/
一、布局容器和栅格网格系统
3.1.布局容器
1、.container类用于固定宽度并支持响应式布局的容器。(会有留白)
<div class="container"></div>
2、.container-fluid类用于100%宽度,占据全部视口(viewport)的容器。
<div class="container-fluid"></div>
3.2.栅格网格系统
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列(可以嵌套)。栅格系统用于通过一系列的行(row)或列(column)的组合来创建页面布局,再调整内外边距,最后结合媒体查询。
注意:网格系统必须使用到CSS
具体设备根据如下配置
功能 | 超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column),只有列(column)才可以作为行容器(.row)的直接子元素,但列数之和不能超过平分的总列数,比如12。如果大于12,则自动换到下一行。
3.2.1.列组合
列总数不能超过12,大于12则自动换刀下一行
<div class="container"><div class="row"><div class="col-md-4">4列</div><div class="col-md-8">8列</div></div>
</div>
3.2.2.列偏移
<div class="container"><div class="row"><div class="col-md-1">1列</div><div class="col-md-1">2列</div><div class="col-md-1 col-md-offset-8">11列</div><div class="col-md-1">12列</div></div>
</div>
3.2.3.列排序
改变列的方向,就是改变左右浮动
<div class="container"><div class="row"><div class="col-md-1 col-md-push-10">1列</div><div class="col-md-1 col-md-pull-1">1列</div> </div>
</div>
3.2.3.列嵌套
<div class="container"><div class="row"><div class="row"><div class="col-md-1 col-md-push-6">1列</div><div class="col-md-1 col-md-pull-6">1列</div> </div><div class="row"><div class="col-md-1 col-md-push-6">1列</div><div class="col-md-1 col-md-pull-6">1列</div> </div></div>
</div>
二、常用样式
4.1.排版
4.1.1.标题
对h1~h6的标题效果进行覆盖,提供劳务对应的类名,为非标题元素设置样式
副标题 small标签 或 .small类名
<h1>h1. Bootstrap heading<small>副标题</small></h1><div class="h1">Bootstrap标题1<span class="small" >副标题</span></div>
4.1.2.段落
通过.lead 来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。
<small>:小号字
<b><strong>:加粗
<i><em>:斜体<p>以后的你会感谢现在努力的你</p><p class="lead">以后的你会感谢现在努力的你</p><p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
4.1.3.强调
定义了一套类名,强调类名,强调类都是通过颜色来表示强调
.text-muted: 提示,使用浅灰色(#999)
.text-primary: 主要,使用蓝色(#428bca)
.text-success: 成功,使用浅绿色(#3c763d)
.text-info: 通知信息,使用浅蓝色(#31708f)
.text-warning: 警告,使用黄色(#8a6d3b)
.text-danger: 危险,使用褐色(#a94442)
4.1.4.对齐
通过定义四个类名来控制文本的对齐风格
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
4.1.5代码
4.2列表
去点列表
class=“list-unstyled”
内联列表
class=“list-inline”
定义列表
使用样式 class=“dl-horizontal” 制作水平定义列表 : 当标题宽度超过160px时,将会显示三个省略号
4.3.表格
基础样式
1).table:基础表格
附加样式
- .table-striped:斑马线表格
- .table-bordered:带边框的表格
- .table-hover:鼠标悬停高亮的表格
- table-condensed:紧凑型表格,单元格没内距或者内距较其他表格的内距小
三、表单
表单的主要功能是用来与用户做交流的一个网页控件,包括:文本输入框、下拉选择框、复选按钮、文本域和按钮等
1、表单控件
表单控件
- .form-control(适中)
- .input-lg(较大)
- .input-sm(较小)
- 输入框 text
2、文本框、下拉框和文本域
- .form-control 表单元素的样式
- .input-lg .input.sm 表单控件的大小
<div class="container"><!-- 文本框 --><div class="row"><div class="col-sm-3"><input type="text" name="" id="" /><input type="text" name="" id="" class="form-control" /><input type="text" name="" id="" class="form-control input-lg" /><input type="text" name="" id="" class="form-control input-sm" /></div></div></div>
文本域 textarea
4.1.2.单选框与复选框
复选框checkbox
- 垂直显示:
.checkbox
- 水平显示:
.checkbox-inline
<div class="row"> <input type="checkbox" >游戏<input type="checkbox" >学习<br><!-- 垂直显示 --><div><div class="checkbox"><label><input type="checkbox" >游戏</label></div><div class="checkbox"><label><input type="checkbox" >学习</label></div></div><!-- 水平显示 --><div><label class="checkbox-inline"><input type="checkbox" >游戏</label><label class="checkbox-inline"><input type="checkbox" >学习</label></div></div>
单选框 radio
- 垂直显示:
.radio
- 水平显示:
.radio-inline
4.1.3.按钮
基础样式: btn
附加样式:btn-primary,btn-info , btn-success, btn-warning ,btn-danger, btn-link,btn-default
按钮大小:使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<div class="row"><button>按钮</button><hr><button class="btn">按钮</button><button class="btn btn-primary">按钮</button><button class="btn btn-info">按钮</button><button class="btn btn-danger">按钮</button><button class="btn btn-warning">按钮</button><button class="btn btn-success">按钮</button><button class="btn btn-link">按钮</button><hr><button class="btn btn-primary btn-xs">按钮</button><button class="btn btn-info btn-sm">按钮</button><button class="btn btn-danger btn-lg">按钮</button><hr><a href="##" class="btn btn-info">a标签按钮</a><span class="btn btn-success">span标签按钮</span><div class="btn btn-warning">div标签按钮</div><br><!-- 按钮禁用--><!-- 样式上禁用 --><button class="btn btn-warning disabled" onclick="alert(1)">按钮</button><!-- 禁用 --><button class="btn btn-success" disabled="disabled" onclick="alert(1)">按钮</button></div>
4.5.表单布局
4.5.1.水平表单
- 向⽗元素添加 role=“form”
- 把标签和控件放在⼀个带有 class .form-group 的中。这是获取最佳间距所必需的
4.5.2内联表单
- 将表单的控件都在⼀⾏内显示form-inline
- 注意label不会显示,存在的意义:如果没有为输⼊控件设置label标签,屏幕阅读器将⽆法正确识别
4.6.缩略图和面板
5.BootStrap组件
5.1.导航
5.2.分页导航
5.3.下拉菜单
5.4.模态框