1. 开发工具
开发工具 : sublime \ vs code
专门针对bootstrap的开发工具 : jetstrap
2. bootstrap的环境搭建
去官网下载 ---- 下载用于生产环的bootstrap
需要引入bootstrap文件-----包括css文件和js文件
使用bootstrap时如果要使用jquery , 则需要引入1.9.1以上的版本
3. bootstrap的全局样式
特点: 代码整洁 风格统一 美观易用
bootstrap对默认的排版样式进行了css样式定义,使得各种基本结构套用出来的html页面更加美观
标题: (h1~h6/.h1~.h6) 在内联样式,如span标签中可以使用标题类
h1:36px h2:30px h3:24px h4:18px h5:14px h6:12px
副标题: (small) 用small标签包括内容,将以小标题的形式在页面中显示
文本: p标签默认14px 、行高20px、底部外边距10px（普通网页中字体大小是16px）
文本对齐方式：
.text-left 左对齐
.text-center 居中
.text-right 右对齐
大小写:
.text-lowercase 小写
.text-uppercase 大写
.text-capitalize 首字母大写
表格 给表格添加一个类 table,表格会好看一些
.table-striped 给表格添加隔行换色
.table-border 给表格添加边框
.table-hover 当鼠标悬浮时,有变色的效果
给表格的某一行添加颜色 <tr class="danger"></tr> 还有 success waring active info
表单
给form添加一个.form-inline的类,则form里的所有内容会横向排列
.form-control 给input框添加bootstrap的样式,使它布满整个屏幕
<form>
<div class="form-group">
<label for="">这是一个输入框:</label>
<input type="text" class="form-control" placeholder="这是一个输入框">
</div>
</form>
input框 大小的改变 .input-lg(更大)/input-sm(更小)
label 添加sr-only类 使提示文字消失不见
button 添加类btn 变成圆角的button .btn-success/.btn-primary/.btn-info...改变按钮的颜色 .active 设置按下的效果 .btn-lg/.btn-sm 改变按钮的大小 .btn-block使按钮全屏
a 标签设置 .btn 也可变成按钮的样式
图片: .img-rounded图片圆角 .img-circle圆形 .img-thumbnail 代边框的圆角图形
4. bootstrap渐进
(1) meta 标签中的 viewport
为了更好的适应手机端的屏幕大小
-
width height 设置宽度和高度
-
user-scalable 设置是否允许用户去放大或者缩小网页
-
initial-scale 设置网页初始化的大小
-
maximum-scale 允许用户放大多少倍
-
minimun-scale 允许用户缩小多少倍
<meta name="viewport" content="width=device-width,initial-scale=1 maxinum-scale=1,minimun-scale=1,user-scalable=yes" >
<!--device-width:当前屏幕的宽度-->
(2) 响应式---栅格布局
<style>
@media screen and (min-width: *px) and (max-width: *px){
//调整屏幕效果
}
</style>
栅格参数
<style>
.test{
height:300px;
background:pink;
}
</style>
<body>
<div class="test .col-lg-3 col-md-4 .col-sm-6 .col-xs-12"></div>
</body>
| 超小屏幕(<768px) | 小屏幕 平板(>=768px) | 中等屏幕 桌面显示器(>=992) | 大屏幕 大桌面显示器(>=1200px) | |
|---|---|---|---|---|
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 : 12
(3) 单位
网页开发中的单位px
-
px 是相对于屏幕分辨率的单位
-
px的大小无法跟随屏幕放大缩小
-
所有浏览器都支持px单位
网页开发中的单位em
-
1em = 16px (但不完全是)
-
em会继承父级元素的字体大小
-
IE的部分浏览器并不支持em
网页开发中的单位rem
-
rem 与 em 相似
-
rem会继承根元素的字体大小
-
html { font-size:10px }
(4) 字体图标
特点: 体积小便于加载 无需重复设计 方便引用
使用glyphicon字体图标库
<style>
.font{
color:red;
font-size:100px;
}
</style>
<body>
<span class="glyphicon glyphicon-asterisk font"></span>
</body>
5. 组件
(1) 怪异的属性 :
-
role 给盲文浏览器进行识别的
-
aria-label 当焦点落在输入框时, 读屏软件会将输入框中的内容读取出来
-
tablndex 可以设置tab键在控件中移动 , 也就是焦点的移动顺序
-
data- html5规范中新增的属性 , 可以自定义的属性 在页面中不显示,可以用来实现数据交互
(2) 下拉菜单
-
.dropdown 控制组件为下拉
-
.dropdown-menu-right 代替.pull-right 右对齐
-
.divider 分割线
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="./jquery-3.3.1.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
这是按钮
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
</ul>
</div>
</body>
(3) 控件组
.input-group 表示控件组
.input-group-addon可放置额外内容及图标
<div class="input-group ">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
(4) 导航
-
以一个带有class .nav的无需列表开始
-
.nav-tabs代表可切换的导航
-
.nav-pills代表胶囊导航
-
.nav-justified 使导航垂直
<ul class="nav nav-tabs">
<li class="active"><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
<ul class="nav nav-pills">
<li class="active"><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
<ul class="nav nav-justified">
<li class="active"><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
(5) 分页
-
.pagination 在父元素中添加表示分页
-
.pager放置在分页区域
-
.previous 把链接向左对齐 .next把链接向右对齐
<nav>
<ul class="pager">
<li class="previous"><a href="#">向左</a></li>
<li class="next"><a href="#">向右</a></li>
</ul>
<ul class="pagination">
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">6</a>
</li>
</ul>
</nav>
(6) 进度条
-
.progress 表示进度条
-
通过状态类改变进度条的颜色
-
.progress-bar-striped 使得进度条颜色渐变
<div class="progress">
<div class="progress-bar" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:60%;">
60%
</div>
</div>
(7) 列表
-
.list-group代表列表
-
.badge 代表状态数
-
.active 代表选中状态
<ul class="list-group">
<li class="list-group-item active">
这是一个列表
<span class="badge">14</span>
</li>
<li class="list-group-item disabled">
这是一个列表
<span class="badge">14</span>
</li>
<li class="list-group-item" list-group-item-info>
这是一个列表
<span class="badge">14</span>
</li>
</ul>
(8) 面板
-
.panel 代表面板
-
.panel-body 代表面板内容
-
.panel-footer代表面板的注脚
<div class="panel panel-primary">
<div class="panel-heading">
弹出层
</div>
<div class="panel-body">
这是面板的具体内容
</div>
<div class="panel-footer">
脚注
</div>
</div>
6. bootstrap的插件
-
bootstrap插件依赖bootstrap.js
-
bootstrap.js 基于jQuery
bootstrap中的插件 --- data属性
-
通过data属性控制页面交互
-
$(document).off('.data-api') 解除属性绑定
<!--一个简单的弹窗效果-->
<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger">
这是测试按钮
</button>
<div id="danger">
这是一个内容
</div>