二、BootStrap
1.1 BootStrap简介
目标:使用BootStrap框架快速开发响应式网页
- Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构及Javascript,快速编写功能完善网页及常见交互效果
- 中文官网:https://www.bootcss.com/
1.2 BootStrap使用步骤
目标:使用Bootstrap框架快速布局响应式网页
1、下载: https://www.bootcss.com/
首页 ->BootStrap3中文文档 ->下载Bootstrap
写项目的时候用的是生产环境的
2、使用
- 引入:Bootstrap提供的CSS代码
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
引用的要么是bootstrap.css要么是bootstrap.min.css(格式化压缩到同一行的,压缩好的,体积小,用户打开速度快,写项目的时候因为不用修改这个css所以直接就引用min.css)
- 调用类:使用Bootstrap提供的样式
- container:响应式布局版心类
1.3 BootStrap栅格系统
目标:使用BootStrap栅格系统布局响应式网页
栅格系统:把网页的整个宽度在BootStrap3中默认等分成12等份 ,每个内容在这12份中占的份数
- 栅格化是指将整个网页的宽度分成若干等份
- BootStrap3默认将网页分成12等份
BootStrap3将所有屏幕分成四种
超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | |
---|---|---|---|---|
响应断点 | <768px | >=768px | >=992px | >=1200px |
别名 | xs | sm | md | lg |
容器宽度 | 100% | 750px | 970px | 1170px |
类前缀 | col-xs-* (*代表元素占的份数 数字) | col-sm-* | col-md-* | col-lg-* |
列数 | 12 | 12 | 12 | 12 |
列间隙 | 30px | 30px | 30px | 30px |
- .container是BootStrap中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中
如果设置版心的时候不想要它自带的15px的内边距呢?可以自己单独设置css,也可以使用.row .col
- 分别使用.row类名和.col类名定义栅格布局的行或列
- container类自带间距15px
- row类自带间距-15px 把带有row这个类的标签放在带有container类的标签里面
- .container-fluid也是BootStrap中专门提供的类名,所有应用该类名的盒子,宽度均为100%
1.4 全局样式
目标:掌握BootStrap手册用法,使用全局CSS样式美化标签
作用:控制单独标签的样式
手册用法:
BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点
网站首页 ->BootStrap3中文文档 ->全局CSS样式 ->按分类导航查找目标类
1.4.1 表格
1.4.2 按钮
1.5 组件
目标:使用BootStrap组件快速布局网页
什么是组件?就是BootStrap团队在框架内部封装好的各种各样网页常见的区域
- 组件
- BootStrap提供的常见功能,包含了HTML结构和CSS样式
- 使用方法
- 引入BootStrap样式
- 复制结构,修改内容
1.5.1 Glyphicons字体图标
目标:使用Glyphicons字体图标实现网页中的图标效果
- Glyphicons字体图标的使用步骤
- HTML页面引入BootStrap样式文件
- 空标签调用对应类名
- glyphicon
- 图标类
1.6 插件
目标:使用BootStrap插件实现常见的交互效果
- 插件
- Bootstrap提供的常见效果,包含了HTML结构,CSS样式还有Javascript
- 插件的使用步骤
- 引入BootStrap样式
- 引入js文件:jQuery.js+BootStrap.min.js
- 复制HTML结构,并释放调整结构或内容
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
注意:
- 必须先引jQuery再引框架的
- 界面有js才有交互效果
案例——Alloy Team
注意点:
- 由于要引两个CSS,一个自己写的CSS,一个BootStrap的CSS,要先写框架的CSS,自己写的CSS在后面,因为如果框架的CSS我们不满意,可以通过自己写的CSS层叠掉,而且BootStrap的CSS已经包含了base.css(初始化的样式)
- 可以定制框架,比如这个项目,想让视口宽度小于992px的时候,导航栏就变成小图标,但是目前的框架不能实现,可以定制,然后把定制完的BootStrap重新下载,引入到自己的代码中
- 像这样的栅格系统,它每一份的宽度都是占父元素的百分之多少,如果要呈现这样的有间距的效果,根本没有空再加margin了,所以它看起来有间距,是因为内容之间有间距
<!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>腾讯全端</title>
<link rel="stylesheet" href="./lib/bootstrap1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- header组件 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- header组件 -->
<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./uploads/banner_1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_4.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 轮播图 -->
<!-- 开源项目部分 -->
<div class="project">
<h3 class="h2">OpenSource/开源项目</h3>
<p>种类众多的开源项目,让你爱不释手</p>
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
</div>
</div>
<!-- 开源项目部分 -->
<script src="./lib/js/jquery.js"></script>
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
//banner
.carousel {
// 视口宽度>992px 图500px min-width
// 视口宽度<992px 图400px max-width
// 视口宽度<768px 图250px max-width
img {
height: 100%!important;
}
@media (max-width: 992px) {
.item {
height: 400px;
}
}
@media (max-width: 768px) {
.item {
height: 250px;
}
}
@media (min-width: 992px) {
.item {
height: 500px;
}
}
}
//header
.navbar-default {
background-color: transparent;
border: 0;
}
//header
// 开源项目
.project {
margin-top: 30px;
text-align: center;
.container {
div {
// background-color: pink;
a {
display: block;
height: 200px;
background-color: skyblue;
}
}
}
}
// 开源项目
注意:
什么样的网站适合做成腾讯全端这样的响应式?企业站,或是内容非常少的网站
淘宝京东那样的电商站,内容太多,做不了响应式效果,解决方法:PC端做一个网站,移动端做一个网站