以bootstrap3为样本
A-1 BootStrap简介
A-1-1 BootStrap介绍
- 官网:Bootstrap·The most popular HTML, CSS, and JS library in the world.
中文网:Bootstrap中文网 - BootStrap是一套现成的CSS样式集合
BootStrap是最受欢迎的HTML,CSS和JS框架,用于来发响应式布局,移动设备优先的web项目
BootStrap建设的网站:界面清晰,简洁;要素排版利落大方
BootStrap特别适合那种没有设计师团队(甚至没有前端的团队)。可以快速的做出一个网页
A-1-2 BootStrap特点
- 简洁,直观,强悍的前端开发框架,HTML,css,js工具集,让web 开发更速,简单
- 基于HTML5,CSS3的BootStrap,具有大量的又热特性:友好的学习曲线,卓越的兼容性。响应式设计,12列格网,样式向导文档
- 自定义JQUERY插件,完整的类库,BootStrap3基于Less,BootStrap4基于Sass的css预处理技术
- BootStrap响应式布局设计,让一个网站可以兼容不同分辨路的设备。BootStrap响应式布局设计,给用户提供更好的视觉使用体验
5)丰富的组件
A-1-3 下载与使用
- 下载:起步 · Bootstrap v3 中文文档 | Bootstrap 中文网
- 下载完成后
拷贝dis/css中的BootStrap.min.css到项目css中
拷贝dis/js中的BootStrap.min.js到项目js中 - 下载 jQuery.js
A-2 Bootstrap的安装
- 方式一:直接映入文件(用CDN的地址)
css:“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
”
如果只想看样式,那么就直接引入css即可
js:“https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jqery.slim.min.js
”
“https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js
”
css在上部引入,js在尾部引入
- 方式二:模块化的包管理的方式
npm install bootstrap
暂时不讲
A-3 Bootstrap的使用
使用的有如下几类:
- 布局(格栅系统)
- 表格
- 表单
- 组件
- JavaScript插件
A-3-1 布局(栅格系统)
Bootstrap需要为页面内容和格栅系统包裹一个.container
容器。框架中提供了两类:
.container类 :用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>
.container-fluid类:用于宽度为100%,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
<div>
注意:由于padding等属性的原因,着两种容器不能互相嵌套
栅格系统
Bootstrap提供了一套响应式、移动设备有限的流式栅格系统,随着屏幕或者视口(viewport)的尺寸增加,系统会自动分为最多12列(12份)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style>
.box{
width: 1500px;
font-size: 12px;
line-height: 50px;
}
.row>div{
border:1px solid red;
height:50px;
text-align: center;
line-height:50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
<div class="col-md-1">
1
</div>
</div>
<div class="row">
<div class="col-md-8"> <!-- 这个里面的8指的是在这一行占8/12 -->
8
</div>
<div class="col-md-4"> <!-- 这个里面的4指的是它占这一行的4/12 -->
4
</div>
</div>
</div>
</body>
</html>
固定宽度。
也可以适应不同设备上的屏幕:
1.列组合
列组合就是更改数字来合并列(列总数不能超过12,大于12,自动换到下一行),有点类似于表格的colspan属性
2.列偏移
有时候,我们不希望相邻的两个列紧靠在一起,让它们之间存在间隙,这就可以用列偏移(offset)来实现。使用列偏移只需在列元素上添加类名.col-md-offset-*
(星号代表要偏移的列组合数),同时应该注意偏移的总数不能超过12
A-4 表格
基础表格
在Bootstrap里,给标签<table>
添加.table
类可以为其赋予基本的样式:少量的内部(padding)和水平方向的分割线
条纹状表格
通过.table-striped
类可以给body内的每一行增加斑马条纹样式
快浏览器兼容性
条纹状表格时以来inth-child
CSS选择器来实现的,二之一功能不被Internet Explorer 8 支持
代码:
<table class="table table-striped">
...
</table>
带边框的表格
通过.table-bordered
类可以给表格和其中的每个单元格怎加边框
和上面那个条纹表格一样
当然,这两个表格是可以叠加在一起
鼠标悬停
通过添加.table-hover
类可以让table中的每一行对鼠标悬停状态做出相应
<table class="table table-hover">
...
</table>
当我们鼠标移动到哪一行,就会出现灰色背景。如果我们不想要灰色背景该怎么办呢?让我们进入css样式表,找到:.table-hover>tbody>tr:hover{background-color:#f5f5f5}
然后复制到style内,将#f5f5f5改成想要的颜色即可。
以上三种特性可以叠加使用,具体参考网站内说明
A-4-1 状态类
通过这些状态类可以为行或者单元格设置颜色
Class | 描述 |
---|---|
.active | 鼠标悬停在行或者单元格上设置的颜色 |
.success | 表示成功或者积极的动作 |
.info | 表示普通的提示信息或者动作 |
.warning | 表示警告或者需要用户注意 |
.danger | 表示危险或者潜在的带来负面影响的动作 |
示例自己看
A-5 表单
单独的表单控件会被自动赋予一些全局样式
所有设置了.form-control
类的<input>
、textarea
和<select>
元素都将被默认设置官渡属性为width:100%;
将label元素和前面提到的空间包裹在.from-group
中可以获得最好的排列
https://v3.bootcss.com/css/#forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<style>
.container{
width:500px;
font-size: 12px;
line-height: 50px;
border:1px solid #dbdbdb;
margin: 50px auto;
border-radius: 10px;
}
</style>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</body>
</html>
注意:不要将表单和输入框混合使用
A-5-1 内联表单
为<form>
元素添加.form-inline
类可以使其内容最对齐且表现为inline-block
级别的控件。只适用于视口(viewport)至少在768px宽度时(视口宽度在小的话就会单折叠)。
具体详情看官网,一定要添加lablel标签
输入框的焦点状态
我们将某些表单空间的默认.outline
样式移除,然后对:focus
状态赋予box-shadow
属性
A-6 按钮
预定样式
尺寸
激活状态
禁用状态
可作为按钮使用的标签或者元素
为<a>
、<button>
或者<input>
元素添加按钮(button class)即可使用Bootstrap提供的样式
组件
类似阿里的iconfont
A-7 模态框
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集
注意:不要在同一个模态框重叠另一个模态框,想要同时支持多个模态框,需要自己写额外的代码来实现。
放置位置:务必将模态框放在文档最高层级内(尽量作为body标签的直接子元素)