Bootstrap框架基础及全局CSS样式
1.使用BS方法
1)本地引入(必须先下载)
a.引入bootstrap.css或bootstrap.min.css
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
b.引入JS(如果不使用插件,不需要引入JS)bootstrap.js或bootstrap.min.js。
注意:bootstrap.js依赖于jquery.js,在引入它之前必须先引入jquery.js。
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
2)CDN引入(不需要下载)(推荐使用这种方法引入)(https://bootcss.cn)
a.引入CSS
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
b.引入JS
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
2.Bootstrap框架解析
1、移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
3.栅格布局
布局方式
<div class="container"> 或container-fluid
<div class="row">
<div class="col-md-*"> .col-xs-*/.col-sm-*/.col-md-*/.col-lg-*
...
</div>
</div>
</div>
注意:多余的列会自动另起一行。
4.响应式(多端布局)
a.图片响应式
.img-responsive
b.隐藏响应式
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
c.字体响应式
用媒体查询实现。
5.类名(样式)
.text-justify:两端对齐(分散对齐)
.text-nowrap:不换行
.text-lowercase:小写
.text-uppercase:大写
.text-capitalize:首字母大写
6.表格
.table:基本表格
.table-striped:条纹状表格
.table-bordered:带边框的表格
.table-hover:带鼠标悬停的表格
.table-condensed:紧缩表格
.table-responsive:响应式表格
表格状态(颜色配置):
.active
.success
.info
.warning
.danger
6.表单
.form-group:组件编组
.form-control:响应式组件
.form-inline:内联表单
.form-horizontal:水平排列的表单
表单中支持的输入类组件:
text、password、datetime、datetime-local、date、month、time、
week、number、email、url、search、tel、color
其它组件:
textarea
radio
checkbox
select
7.图片
.img-responsive:响应式图片
.img-rounded:圆角
.img-circle:圆
.img-thumbnail:缩略图
Bootstrap组件
1、字体图标
使用注意事项:
1)在图标和文本之间添加一个空格;
2)图标增置aria-hidden=“true” 属性;
aria-hidden=“true”:用于屏幕阅读器,帮助残障人士更好地访问该网站。
3)增加.sr-only类名。
.sr-only:(仅供)屏幕阅读器用,主要用于增强可读性,具有隐藏效果
aria-label:该属性用来给当前元素加上标签描述,一般用在任何典型的HTML元素中。
2.导航
1.导航条(重要)
由两部分组成:1)菜单小按钮(适小屏)+logo 2)导航栏内容
.navbar-fixed-top:导航栏固定在顶部
.navbar-fixed-bottom:导航栏固定在底部
.navbar-static-top:静止在顶部
.navbar-inverse:反色的导航条
2.分页(重点)
用于数据量大的内容呈现。
3.标签
主要起标识作用。
.label
4.徽章
未读消息条数提示。
.badge
5.警告框
具有警示作用(或提示作用)。
.alert
data-dismiss="alert" 添加关闭按钮,且具有关闭作用。