一、Bootstrap
1.特点:
1、简洁、直观、强悍的前端开发框架,html、css、javascript 工具集,让
web 开发更迅速、简单。
2、基于 html5、css3 的 bootstrap,具有大量的诱人特性:友好的学习曲线,
卓越的兼容性,响应式设计,12 列格网,样式向导文档。
3、自定义 JQuery 插件,完整的类库,bootstrap3 基于 Less,bootstrap4
基于 Sass 的 CSS 预处理技术
4 、Bootstrap 响应式布局设计, 让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计,给用户提供更好的视觉使用体验。
5、丰富的组件
2、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们
提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器
类不能互相嵌套。
1、.container 类用于固定宽度并支持响应式布局的容器。
...
2、.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容
器。
...
3、栅格网格系统(Grid System)
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分 12 份(也有平分成 24 份或 32 份,但 12 份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。
注意: 网格系统必须使用到 css
container 、row 、xs (xsmall phones), sm (small tablets), md (middle desktops) lg (larger desktops) 即: 超小屏( 自动) ,小屏(750px),中屏(970px)和大屏(1170px) 数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。在行(.row)中可以添加列(.column), 只有列(column)才可以作为行容器(.row)的直接子元素,但列数之和不能超过平分的总列数,比如 12。如果大于 12,则自动换到下一行。
具体内容应当放置在列容器(column)之内
4.表格
(1)样式:
Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式的表格。在使用 Bootstrap 的表格过程中,只需要添加对应的类名就可以得到不同的表格风格:
基础样式
1).table:基础表格 附加样式
1) .table-striped:斑马线表格
2) .table-bordered:带边框的表格
3) .table-hover:鼠标悬停高亮的表格
4). table-condensed:紧凑型表格,单元格没内距或者内距较其表格的内距更小
(2)
提供了五种不同的类名,每种类名控制了行的不同背景颜色5.表单控件
.form-control .input-lg(较大) .input-sm(较小)
(1)输入框
.form-control
(2)下拉选择框 select
多行选择设置:multiple="multiple"
(3)文本域 textarea
(4)复选框 checkbox
.checkbox,水平显示:.checkbox-inline
(5)单选择按钮
.radio, 水平显示:.radio-inline
(6)按钮
1)使用 button 实现
基础样式: btn
附加样式:btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2)多标签支持:使用 a div 等制作按钮
3)按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
4)按钮禁用
方法 1:在标签中添加 disabled 属性
方法 2:在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了,并不是真正的禁用了此按钮!