开篇废话是一种情怀
- 上一篇说到Less预处理语言,这节就着重讲下Bootstrap框架,这款框架应该是现在前端人手必备,就是那么的好用.不管是兼容性还是组建,都是无可挑剔的
- Bootstrap这种东西一定要学会,不然在前端开发中,你就好像是少了一只脚一样,现阶段我们只有拿来主义,先去用它,然后再慢慢的一点点的去研究它,超越它
- 好处就是生态圈火，不断地更新迭代,提供一套美观大方地界面组件,提供一套优雅的 HTML+CSS 编码规范,让我们的 Web 开发更简单，更快捷；
- 注意点就是使用Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式
下载Bootstrap
下载3.3.6链接:
https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
下载4.0链接:
https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
在线自定义
源码编译 --- LESS语言
搭建 Bootstrap 页面骨架及项目目录结构
├─ /project file/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
├─ /font/ ······················ 使用到的字体文件
├─ /img/ ······················· 使用到的图片文件
├─ /js/ ························ 自己写的JS脚步
├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
├─ /favicon.ico ················ 站点图标
└─ /index.html ················· 入口文件
约定编码规范
HTML约定
- 所有的CSS引用在HEAD中，按照第三方优先的顺序排列，我们自己的CSS肯定在最下面
- 所有JS文件都引用在Body的最下面（加载的缘由），按照依赖顺序排序
- 如果只是使用bootstrap的样式的话，就不用引用js文件
- 在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖
- 在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js依赖jQuery，那就应该先引用jquery.js 然后引用bootstrap.js
CSS约定
- 除了公共级别样式，其余样式全部由 模块前缀
- 尽量使用 直接子代选择器， 少用间接子代 避免错杀
- CSS类名冲突 通过约定 给模块加上一个独一无二的名字
- 使用子代选择器的方式
JS约定
- 不允许使用
onxxx = function(){}的方式注册事件 - 原生JS统一使用
addEventListener('xxx', function(){});
HTML5文档结构
- 示例代码 :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
</body>
</html>
视口Viewport设置
- ** 示例代码 : **
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
1.html中插入视口设置，可以通过
emmet meta:vp插入
2.此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
** 3.960px 内容 被套在一个宽度为980px(绝大多数设备的视口默认尺寸)的容器(视口)中，将视口缩放到414px的设备中展示
4.width:视口的宽度
5.initial-scale：初始化缩放
6.user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
7.minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
8.maximum-scale:最大缩放**
浏览器兼容模式
- ** 示例代码 : **
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html中插入兼容模式设置，可以通过
emmet meta:compat插入
此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档
站点图标 favicon
- ** 示例代码 : **
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
html中插入图标链接，可以通过
emmet link:favicon插入
引入相应的第三方文件
- 示例代码 :
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>
在我们默认的样式表中将默认字体设置为：
- 示例代码 :
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
版心container类
- 定义一个固定宽度且居中的版心
- container是具备响应式的能力
- 四个档位 1170 - 970 - 750 - 100%
栅格系统 ----> 核心部分
- Bootstrap中的栅格系统就是将一行划分为12列
- 我们通过col--的类名控制某个元素在某种屏幕的情况下展示几列**
- col-md-6 在中等屏幕下 占1/2
- col-xs-12 在超小屏幕下 占全部
行排列 ----> row
.row{ ml:-15px; mr:-15px }- 抵消掉container中定义的padding
列排列 ----> col-*-*类
- 在某种屏幕尺寸下控制列的占比
1.col-xs-[列数]：在超小屏幕下展示几份
2.col-sm-[列数]：在小屏幕下展示几份
3.col-md-[列数]：在中等屏幕下展示几份
4.col-lg-[列数]：在大屏幕下展示几份
5.xs : 超小屏幕 手机 (<768px)
6.sm : 小屏幕 平板 (≥768px)
7.md : 中等屏幕 桌面显示器 (≥992px)
8.lg: 大屏幕 大桌面显示器 (≥1200px)
字体图标
- 字体实际上就是记录一个字符对应的图形
- 在CSS中为元素设置字体，以前只能设置客户端存在的字体
- webfont 在线字体
- 自己做一套图形的字体,可以使用icomoon进行制作.
- 如何定义一个web字体
- ** 示例代码 : **
/* 定义一个叫做“xxx”字体 */
@font-face {
font-family: 'xxx';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('../font/MiFie-Web-Font.svg') format('svg'),
url('../font/MiFie-Web-Font.ttf') format('truetype'),
url('../font/MiFie-Web-Font.woff') format('woff');
}
字体文件格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
字体文件格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
自定义按钮样式生成
- 链接 : http://blog.koalite.com/bbg/
- 可以通过界面生成一个新的按钮样式
.btn-xxx{
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-xmg:hover,
.btn-xmg:focus,
.btn-xmg:active,
.btn-xmg.active,
.open .dropdown-toggle.btn-xmg {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-xmg:active,
.btn-xmg.active,
.open .dropdown-toggle.btn-xmg {
background-image: none;
}
.btn-xmg.disabled,
.btn-xmg[disabled],
fieldset[disabled] .btn-xmg,
.btn-xmg.disabled:hover,
.btn-xmg[disabled]:hover,
fieldset[disabled] .btn-xmg:hover,
.btn-xmg.disabled:focus,
.btn-xmg[disabled]:focus,
fieldset[disabled] .btn-xmg:focus,
.btn-xmg.disabled:active,
.btn-xmg[disabled]:active,
fieldset[disabled] .btn-xmg:active,
.btn-xmg.disabled.active,
.btn-xmg[disabled].active,
fieldset[disabled] .btn-xmg.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-xmg .badge {
color: #E92322;
background-color: #ffffff;
}
3.5小屏幕隐藏
- 示例代码 :
<div class="topbar hidden-xs hidden-sm"></div>
||
<div class="topbar visible-md visible-lg"></div>
- __hidden-xx : 在某种屏幕下隐藏 __
- visible-xx-xxx : 在某种屏幕尺寸下显示
- visible-md-xx：指的是中等屏幕可见，不是中等屏幕以上
- visible-md-block visible-lg-block == hidden-sm hidden-xs
自己实现一套相同的工具类
- 根据hidden-xxx和visible-xxx的特点，通过媒体查询的方式
- 示例代码 :
@media (max-width:768px) {
/*-xs*/
.hidden-xs {
display: none;
}
.visible-xs-block {
display: block;
}
.visible-xs-inline {
display: inline;
}
.visible-xs-inline-block {
display: inline-block;
}
}
@media (max-width:992px) {
/*-sm*/
.hidden-sm {
display: none;
}
.visible-sm-block {
display: block;
}
.visible-sm-inline {
display: inline;
}
.visible-sm-inline-block {
display: inline-block;
}
}
@media (max-width:1200px) {
/*-md*/
.hidden-md {
display: none;
}
.visible-md-block {
display: block;
}
.visible-md-inline {
display: inline;
}
.visible-md-inline-block {
display: inline-block;
}
}
@media (min-width:1200px) {
/*-lg*/
.hidden-lg {
display: none;
}
.visible-lg-block {
display: block;
}
.visible-lg-inline {
display: inline;
}
.visible-lg-inline-block {
display: inline-block;
}
}
使用一个第三方的jquery插件步骤
- 下载包
- 引用jquery
- 引用包
- 编写特定的HTML结构
- 自己写一段JS调用一下这个插件
- Bootstrap框架中的所有JS组件都依赖于jQuery实现
- 现在市面上很多插件的调用方式是不需要自己写JS
- 其实这些插件都会根据HTML的特殊点自动执行
4.导航通栏
- 在使用了boostrap过后，大多数界面元素都是通过bootstrap提供好的界面组件修改得来
<nav class="navbar navbar-default navbar-xmg navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</nav>
Bootstrap扩展
- 通过bootstrap文档对导航条样式的设置发现，其实本身是有一个类似于主题的概念
- navbar-default：默认的外观
- navbar-inverse：暗色背景的样式
- 所以我们希望可以通过自定义一套完整的风格（继承navbar-default）：
- navbar-xxx
- 示例代码 :
.navbar-xxx{
...
}
具体代码参考官网navbar-default实现即可
菜单行高调整
- 默认样式中菜单的行高为20px，我们可以调整为自己想要的高度
- 一般都是通过自己的样式去覆盖
响应式菜单
- 默认菜单是不具备响应式的能力的，通过观察文档发现，响应式菜单是通过一个按钮控制的
- 示例代码 :
<nav class="navbar navbar-default navbar-xmg navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- 点击该按钮会切换菜单的显示或隐藏 -->
<button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切换菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
<li><a href="#">导航列表</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">更多信息</a></li>
</ul>
</div>
</div>
</nav>
轮播图
Bootstrap JS插件使用
- 对于Bootstrap的JS插件
- 我们只需要将文档实例中的代码粘到我们自己的代码中
- 让后作出相应的样式调整
Bootstrap中轮播图插件叫作Carousel
基本的轮播图实现
- 示例代码 :
<!--
以下容器就是整个轮播图组件的整体，
注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
bootstrap.js会自动为当前元素添加图片轮播的特效
-->
<div id="轮播图的ID" class="carousel slide" data-ride="carousel">
<!-- ol标签是图片轮播的控制点 -->
<ol class="carousel-indicators">
<!--
每一个li就是一个单独的控制点
data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个
data-slide-to属性是指当前的li元素绑定的是第几个轮播项
注意，默认必须给其中某个li加上active，展示的时候就是焦点项目
-->
<li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
<li data-target="#轮播图的ID" data-slide-to="1"></li>
<!-- ...更多的 -->
</ol>
<!--
.carousel-inner是所有轮播项的容器盒子，
注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
-->
<div class="carousel-inner" role="listbox">
<!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->
<div class="item active">
<!-- 轮播项目中展示的图片 -->
<div class="carousel-caption">
<!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->
</div>
</div>
<div class="item">
<!-- ... -->
</div>
<!-- ... -->
</div>
<!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 -->
<!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
<!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反 -->
<a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
由于轮播图片超宽造成的影响
- 一个超宽的图片在容器中居中显示：
- position方式
- background方式 通过背景图的定位方式
- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度
- 而且Bootstrap的样式中默认将图片的max-width设置为100%；
- 造成界面图片缩放
- 想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示
三种办法：
1.换用背景图的方式，background-position: center center;
2.使img元素绝对定位，left:50%，margin-left: -width/2
3.translate方式
background使用
- 将容器的高度固定（比如 : 410px）
- 将轮播图改为背景显示
- 由于可能图片的高度不一定是410px
- 所以需要设置css3中的background-size
background-size
-
length
如 background-size: 100px 100px，将背景图固定到多大尺寸 -
percentage
如 background-size: 90% 90%，以百分比的形式设置背景大小 - cover
1.背景图片等比例缩放
2.让背景图相对较小边放大到目标容器大小结束
3.如：一张100*200的背景图放到一个300*400的盒子中，最终背景图片的大小是300*600
4.因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300*600
- contain
1.背景图片等比例缩放
2.让背景图相对较大边放大到目标容器大小结束
3.如：一张100*200的背景图放到一个300*400的盒子中，最终背景图片的大小是200*400
4.因为背景图的较大边为200，将200放大到目标容器400的高度，放大了2倍，最终结果200*400
图片响应式
- 各种终端都需要正常显示图片
- 移动端应该使用更小（体积）的图片
- 实现方式
1.将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）
2.通过JS的方式获取屏幕的宽度；
3.判断屏幕宽度是否小于一定的值（如：768）
4.根据判断情况决定使用具体的大图还是小图
- 示例代码 :
// 获取屏幕宽度
var windowWidth = $(window).width();
// 判断屏幕属于大还是小
var isSmallScreen = windowWidth < 768;
// 根据大小为界面上的每一张轮播图设置背景
// $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
// 因为拿到是DOM对象 需要转换
var $item = $(item);
// var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
var imgSrc =
isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
// 设置背景图片
$item.css('backgroundImage', 'url("' + imgSrc + '")');
});
window resize事件
- 由于上一步我们实现的过程是指在页面加载完成判断一次，
- 当用户手动调整页面宽度过后没有及时发生变化，
- 所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题
- 示例代码 :
function 窗口变化后执行的函数名(){
// 具体的操作
}
$(window).on('resize', 窗口变化后执行的函数名);
- 这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次
- 示例代码 :
...
$(window).on('resize', 窗口变化后执行的函数名).trigger('resize');
小图片不需要使用背景的方式
- 小图如果还是使用背景的方式，当屏幕特别小时，效果很差
- 所以当使用小图时，改用img的方式
- 示例代码 :
// 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
if (isSmallScreen) {
$item.html('');
} else {
$item.empty();
}
- 按照目前的情况，如果是小图展示则不需要给容器加上410px的固定高度
- 所以我们可以通过CSS媒体查询的方式解决
- 示例代码 :
#main_ad > .carousel-inner > .item {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media (min-width: 768px) {
#main_ad > .carousel-inner > .item {
height: 410px;
}
}
#main_ad > .carousel-inner > .item > img {
width: 100%;
}
响应式辅助类型
- 整个板块在超小屏幕下是隐藏起来的
- 只需要给当前板块加上hidden-xs的class
预置界面组件
JavaScript插件 -- 内置组件
- 模态对话框
- 下拉菜单
- 滚动监听
- 标签页
- 工具提示
- 弹出框
- 警告框
- 按钮
- 折叠面板
- 轮播图
- 吸顶效果
- data-spy="affix"
- data-offset-top="什么位置出现"
- data-offset-bottom="什么位置消失"
