二、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-widthimg {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端做一个网站，移动端做一个网站

响应式布局——Bootstrap相关推荐

【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
移动web开发 17-1 响应式布局 bootstrap首页框架阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法当屏幕宽度<=768 ...
【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
学习视频及笔记参考来源: 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一.响应式开发 1.响应式开发原理原理:就是使 ...
响应式布局 bootstrap栅格系统
阿里百秀案例制作 1.1 技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸项目结构搭建 Bootstrap 使用四步曲: 创建 ...
移动WEB开发之响应式布局--Bootstrap栅格系统
栅格系统简介栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局. Bo ...
移动端（响应式布局--阿里百秀）
技术栈:响应式布局 bootstrap框架 less flex html程序 <!DOCTYPE html> <html lang="en"><hea ...
Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
BootStrap之前奏响应式布局
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架一.响应式布局 1.1 历史问题回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...
[JavaWeb-Bootstrap]Bootstrap响应式布局
响应式布局 * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤:1. 定义容器.相当于之前的table.* 容器分类:1. ...

响应式布局——Bootstrap