移动端基础-响应式开发：Bootstrap前端开发框架-编程知识

Bootstrap使用

目前只考虑样式库CSS布局效果

步骤：

1.创建文件

2.创建HTML骨架结构

3.引入相应样式文件

4.书写内容

创建文件

到官网下载好bootstrap.js

创建文件夹：

将样式引入

直接查找css样式：

注意：不同的样式是通过类来定义的，所有可以得到同样效果如下：

书写内容：

直接拿bootstrap预先定义好的样式使用

可以修改bootstrap原来的样式，注意权重

布局容器

为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类，叫.container，

它提供了两个做此用处的类

1. container

响应式布局的容器 固定宽度

大屏（>=1200px）宽度定位1170px

中屏（>=992px）宽度定位970px

小屏（>=768px）宽度定位750px

超小屏（100%）

划分了四个档位，不再需要媒体查询

2. container-fluid

流式布局容器 100%宽度

占据全部视口的容器

适于单独做移动端开发

栅格系统

将页面布局划分为等宽的列（通常为12份），通过列数的定义模块化页面布局

与rem的区别是 bs是container被划分，rem是window被划分

系统通过row与column的组合创建页面布局，页面可以放入这些创建好的布局中

如果孩子分数等于12，占满container宽度

如果孩子分数小于12，留有空白

如果大于，会换行

如图可以实现响应式，屏幕缩小时每行的布局发生变化

每一列默认15px的padding

栅格系统列嵌套

一个列内再分为若干小份，嵌套最好加一个row，即取消padding值，高度还和父级一样（因为row的外边距为负值，抵消边距）

列偏移

col-md-offset-偏移列数

效果：

其实偏移的实质是增加外边距

列排序

通过 .col-md-push-*和 .col-md-push-*类改变列的顺序

响应式工具

对不同设备展示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

可在中屏时，可隐藏3

同理，有 .visible-xs显示内容

案例

设计图：采用1280px设计尺寸

框架bootstrap：

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><title>Bootstrap 101 Template</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><link rel="shortcut icon" href=""><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}</style></head><body><div class="container"><div class="row"><header class="col-md-2"><div class="logo"><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/images/logo.png" alt="" class="hidden-xs"><span class="visible-xs">阿里百秀</span></a></div><div class="nav"><ul><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li><li><a href="#" class="glyphicon glyphicon-apple">科技潮</a></li><li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li></ul></div></header><article class="col-md-7"><div class="new clearfix"><ul><li><a href="#"><img src="	https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/lg.png" alt=""><p>阿里百秀</p></a></li><li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/1.jpg" alt=""><p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p></a></li><li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/2.jpg" alt=""><p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p></a></li><li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt=""><p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p></a></li><li><a href="#"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/4.jpg" alt=""><p>奇了，成都一小区护卫长得像马云，市民纷纷求合影</p></a></li></ul></div><div class="publish"><div class="row"><div class="col-sm-9"><h3>生活馆 关于养生应该知道的知识</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-20</p><p>养生知识10个，你值得拥有</p><p class="text-muted hidden-xs">阅读（2417）评论（1234）赞（12万）标签：健康</p></div><div class="col-sm-3 hidden-xs"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于养生应该知道的知识</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-20</p><p>养生知识10个，你值得拥有</p><p class="text-muted hidden-xs">阅读（2417）评论（1234）赞（12万）标签：健康</p></div><div class="col-sm-3 hidden-xs"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于养生应该知道的知识</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-20</p><p>养生知识10个，你值得拥有</p><p class="text-muted hidden-xs">阅读（2417）评论（1234）赞（12万）标签：健康</p></div><div class="col-sm-3 hidden-xs"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/3.jpg" alt=""></div></div></div></article><aside class="col-md-3"><a href="#" class="banner"><img src="https://vivianlhm.gitee.io/alibaba-baixiu-project/upload/zgboke.jpg" alt=""></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p class="text-muted">这里收录了国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示</p></a></aside></div></div>
</body></html>

@media screen and (min-width: 1280px) {.container {width: 1280px;}
}body {background-color: #f5f5f5;.container {background-color: #fff;}
}li {list-style: none;
}button {cursor: pointer;
}a {color: #666;text-decoration: none !important;
}button,
input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}.logo {background-color: #429ad9;img {display: block;max-width: 100%;margin: 0 auto;}span {display: block;height: 50px;line-height: 50px;color: #fff;font-size: 18px;text-align: center;}
}header {padding-left: 0 !important;
}.nav {background-color: #eee;border-bottom: 1px solid #ccc;a {text-decoration: none;display: block;height: 50px;line-height: 50px;font-size: 16px;padding-left: 30px;&:hover {background-color: #fff;text-decoration: none;}&::before {vertical-align: middle;padding-right: 5px;}}
}ul {margin: 0;padding: 0;
}@media screen and (max-width:991px) {.nav li {float: left;width: 20%;}article {margin-top: 10px;}
}@media screen and (max-width:766px) {.nav li a {font-size: 12px;}.new {li:nth-child(1) {width: 100% !important;}li {width: 50%!important;}}
}.new {li {float: left;width: 25%;height: 128px;padding-right: 10px;margin-bottom: 10px;a {display: block;width: 100%;height: 100%;position: relative;p {position: absolute;bottom: 0;left: 0;background: rgba(0, 0, 0, .5);color: #fff;font-size: 12px;width: 100%;height: 41px;margin-bottom: 0;padding: 5px 10px;}img {width: 100%;height: 100%;}}&:nth-child(1) {width: 50%;height: 266px;p {line-height: 41px;font-size: 20px;padding: 0 10px;}}}
}.publish {border-top: 1px solid #ccc;img {margin-top: 10px;width: 100%;}.row {border-bottom: 1px solid #ccc;padding: 10px 0;h3 {font-size: 14px;}}}.banner {img {width: 100%;}
}.hot {display: block;margin-top: 10px;border: 1px solid #ccc;padding: 0 20px 20px;span {border-radius: 0;margin-bottom: 20px;}
}