Bootstrap
一、Bootstrap介绍
简洁、直观的前端开发框架,让web开发更迅速、简单
用于开发响应式布局、移动设备优先的WEB项目
官网:https://www.bootcss.com/
Bootstrap是一个HTML,CSS,JavaScript的框架
Bootstrap框架包含了很多常见的CSS样式,JavaScript的效果
Bootstrap框架官方文档的案例足够你应付项目中大部分的需求
二、Bootstrap安装
1.第一种方式:
直接引入文件的方式(用CDN的地址)
CSS:“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css”
JS:
“https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js”
“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js”
2.第二种方式:
模块化的包管理的方式
npm install bootstrap
三、Bootstrap的使用
1.布局(栅格系统)
(1)布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器。框架中提供了两个类。
.container类
用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid类
用于100%宽度占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
注意:
由于padding等属性的原因,这两种容器类不能互相嵌套。
(2)栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,
随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列(12份)
(3)栅格参数
超小屏幕 手机(<768px) | 小屏幕 平板(>=768px) | 中等屏幕 桌面显示器(>=992px) | 大屏幕 大桌面显示器(>=1200px) | |
---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列 | ||
.container 最大宽度 | None(自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 |
2.表格
在Bootstrap里,给标签<table>添加.table类可以为其赋予基本的样式——少量的内补(padding)和水平方向的分隔线
条纹状的表格
通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式
跨浏览器兼容性
条纹状表格是依赖 :nth-child CSS选择器实现的,而这一功能不被 Internet Explorer 8 支持
带边框的表格
添加.table-bordered类为表格和其中的每个单元格增加边框。
鼠标悬停
通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。
3.表单
单独的表单控件会被自动赋予一些全局样式。
所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列
(1)按钮
可作为按钮使用的标签或元素
为<a>、<button>或<input>元素添加按钮类(button class)即可使用Bootstrap提供的样式
4.组件
图标
下拉菜单
输入框组
按钮组
5.javascript插件
模态窗口