最近用Bootstrap框架学着做了一个项目，用时3天，很是粗糙，不过每个模块讲解都很详细，项目模板、素材已经放到github，欢迎下载，试看
手把手带你玩Bootstrap
前提知识：
在项目中添加下好的Bootstrap框架的项目文件的时候需要下载好的文件
（下载不分前后，使用导入需要注意顺序）
1、jQuery库文件文件：https://jquery.com/
2、Bootstrap框架文件，下载地址：https://www.bootcss.com/
jQuery库文件文件：https://jquery.com/
注意：
1、将所有的文件与配置文件全部引入，可以单独放在一个文件夹中，否则在用的时候容易出错
2、官方中文文档：https://v3.bootcss.com
3、所用的Bootstrap版本是3的版本，在4的版本中取消了图标
4、推荐一个图标免费下载使用网站 https://v3.bootcss.com/components/
5、（因为图标是字体所以控制需用font）
<span class="glyphicon glyphicon-envelope" aria-hidden="true" style="font-size: 40px;"></span>
使用意义所在：矢量图标，所以放大不会失真，在web端和移动端都可使用
网页初始模板
<!doctype html>
<!-- 设置中文解析 -->
<html lang="zh-cn">
<head>
<!-- 字符编码格式 -->
<meta charset="utf-8">
<!-- 适配浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 适配移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->/
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- 自己引入的css -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- 站点图标 -->
<link rel="Shortcut Icon" href="" type="image/x-icon" />
<!-- 标题 -->
<title>撩妹学院-it人的梦想之都</title>
</head>
<body>
<h1>Hello, world!</h1>
<!---------------------------- 头部 start--------------------------------->
<header id="lk_header">头部</header>
<!---------------------------- 头部 end --------------------------------->
<!---------------------------- 轮播图 start--------------------------------->
<header id="lk_carousel">轮播图</header>
<!---------------------------- 轮播图 end--------------------------------->
<!----------------------------热门课程 start--------------------------------->
<header id="lk_hot">热门课程</header>
<!----------------------------热门课程 end--------------------------------->
<!---------------------------- 产品中心 start--------------------------------->
<header id="lk_product">产品中心</header>
<!---------------------------- 产品中心 end--------------------------------->
<!---------------------------- 关于我们 start--------------------------------->
<header id="lk_about">关于我们</header>
<!---------------------------- 关于我们 end--------------------------------->
<!---------------------------- 友情链接 start--------------------------------->
<header id="lk_link">友情链接</header>
<!---------------------------- 友情链接 end--------------------------------->
<!---------------------------- 尾部 start--------------------------------->
<header id="lk_footer">尾部</header>
<!---------------------------- 尾部 end--------------------------------->
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
项目前提知识储备
流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid">
<div class="row">
...
</div>
</div>
实现栅格化布局，实现原理
方法一：采用JavaScript写原生的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原理</title>
<style type="text/css">
.container{
height: 40px;
margin: 0 auto;
background-color: #0056B3;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
111
</div>
</div>
<script type="text/javascript">
window.addEventListener("load", function() {
//1、获取变量,这是es6的版本中的定义变量的方法
let container = document.querySelector(".container");
let clientW = 0;
// 调用写好的改变宽度的方法
resize();
// 2、监听窗口的大小变化
window.addEventListener("resize", resize);
// 改变盒子适应大小的方法
function resize() {
// 2.1获得改变后的宽度
clientW = window.innerWidth;
//2.2判断
if (clientW >= 1200) {
// 超大屏幕
container.style.width = "1170px";
} else if (clientW >= 992) {
// 大屏幕
container.style.width = "970";
} else if (clientW >= 768) {
// 小屏幕
container.style.width = "100%";
}
}
});
</script>
</body>
</html>
方法二：采用媒体查询的方式定义container
<style type="text/css">
.container {
height: 40px;
margin: 0 auto;
background-color: #0056B3;
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
/* 超级小屏幕 */
.container {
width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 992px) {
/* 小屏幕 */
.container {
width: 750px;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
/* 大屏幕 */
.container{
width: 1170px;
}
}
}
</style>
添加网站的图标，所需要的网站图标 （格式为ico）
在标签中使用：
<link rel="Shortcut Icon" href="ico图标的路径" type="image/x-icon" />
一、网页顶部
（1）顶部介绍栏：
移动端可以隐藏，网页端显示
栅格布局，采用固定的12列的方式
自己动手实现显示与隐藏：（采用媒体查询的方式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background-color: red;
margin: 20px auto;
}
@media screen and (max-width:70px) {
.hidden-xs{
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.hidden-sm{
display: none;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.hidden-md{
display: none;
}
}
@media screen and (max-width: 1200px) {
.hidden-lg{
display: none;
}
}
</style>
</head>
<body>
<div class="container hidden-md"></div>
</body>
</html>
将div都放上边框：
index.html中
<!---------------------------- 头部 start--------------------------------->
<header id="lk_header">
<div class="top-bar hidden-sm hidden-xs">
<div class="container">
<div class="row">
<div class="top-bar-1 col-md-2 ">
<a href="#">
<i class="icon-phone"></i>
<span>关注微信号</span>
<span class="caret"></span>
<img src="img/ewm_xzh.jpg" width="130" alt="邹卓" />
</a>
</div>
<div class="top-bar-2 col-md-5">
<i class="icon-tel"></i>
<span>8888-555-666 (服务热线：9:00-21:00)</span>
</div>
<div class="top-bar-3 col-md-2">
<a href="#">校企合作</a>
<a href="#">培训机构</a>
</div>
<div class="top-bar-4 col-md-3">
<a class="btn btn-danger" href="#" role="button">免费注册</a>
<a class="btn btn-info" href="#" role="button">立即登录</a>
</div>
</div>
</div>
</div>
</header>
<!---------------------------- 头部 end --------------------------------->
在css中
/******************头部 start*******************/
/* 设置存放的盒子的大小 */
#lk_header .top-bar{
/* 宽度 */
height: 40px;
/* 行高 */
line-height: 39px;
/* 边框 */
border-bottom: 1px #E0E0E0 solid;
}
/* 采用兄弟选择器的实现获得每一个div的边框 */
#lk_header .top-bar .container .row>div+div{
border-left: 1px solid #E0E0E0;
}
/******************头部 end*******************/
文本颜色：
为文本添加相应的颜色
设置隐藏二维码：
/* 设置二维码不触碰的时候为为相对定位 */
#lk_header .top-bar .container .row .top-bar-1 a{
position: relative;
text-decoration: none;
}
/* 设置二维码出现的时候展示的位置 */
#lk_header .top-bar .container .row .top-bar-1 a img{
display: none;
position: absolute;
left: 50%;
margin-left: -60px;
margin-top: -10px;
}
/* 当鼠标移动上去的时候设置为绝对定位 */
lk_header .top-bar .container .row .top-bar-1 a:hover img{
display: block;
}
按钮的颜色，尺寸，款式：https://v3.bootcss.com/css/#buttons-sizes
根据自己的意愿自动生成按钮的代码：http://blog.koalite.com/bbg/
最牛前端。包含很多工具，官方文档。字体图标，框架与类库等：http://f2er.club/
不适用框架中的图标，外部引入图标，框架中也有自带的：
自定义图标：https://icomoon.io/app/#/select
自带的图标：https://v3.bootcss.com/components/
图标是字体，所以css样式控制需要注意的是采用font来进行控制
<span class="图标的名称" aria-hidden="true"></span>
（2）导航栏：
导航栏的翻转，默认白色转变为黑色
可用的组件为(默认样式得导航条);
https://v3.bootcss.com/components/?#navbar-default
一般会有三种导航条，（1）固定在顶部（2）固定在底部（1）静止在顶部
导航栏的css：
/* 当鼠标移动上去的时候设置为绝对定位 */
#lk_header .top-bar .container .row .top-bar-1 a:hover img{
display: block;
}
/* 背景颜色 */
#lk_header .navbar-lk{
background-color: #000000;
}
/* 设置每个选项的高度 */
#lk_header .navbar-lk .navbar-nav a{
height: 70px;
line-height: 50px;
}
/* 设置导航栏左边的图标 */
#lk_header .navbar-lk .navbar-brand{
height: 70px;
padding-top: 10px;
padding-left: 56px;
}
/* 鼠标移动到选项的时候的效果 */
#lk_header .navbar-lk .navbar-nav li a:hover{
background: #212529;
border-bottom: 2px solid #28A4C9;
}
导航栏的html：采用的框架的改编
<!-- 网页端导航条 -->
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-lk">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#zz" 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="img/lk_logo_sm.png" width="180" alt="邹卓">
</a>
</div>
<div class="collapse navbar-collapse" id="zz">
<ul class="nav navbar-nav">
<li><a href="/"><font size="4px">课程介绍</font></a></li>
<li><a href="/"><font size="4px">热门课程</font></a></li>
<li><a href="/"><font size="4px">专题学习</font></a></li>
<li><a href="/"><font size="4px">就业指导</font></a></li>
<li><a href="/"><font size="4px">关于我们</font></a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
<li><button type="button" class="btn btn-primary btn-sm" style="line-height: 20px;margin-top: 20px;margin-right: 25px;">个人中心</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
（3）轮播图
框架地址：https://v3.bootcss.com/javascript/#carousel
遇到一个轮播图与上面的间隔有20px的问题
原因：
解决方法：将此标签设置为margin-bottom: 0;
在实际开发中轮播图一般会准备两套，pc端一套，移动端一套
采用可以控制API的data来进行控制两套之间的切换
在js中：
$(function() {
$(window).on("resize", function() {
// 获取窗口的宽度
let clientW = $(window).width();
// 设置显示小图或者大图的临界值
let isShowBigImage = clientW >= 800;
// 获取所有的item
let $allItem = $("#lk_carousel .item");
// 遍历
$allItem.each(function(index, item) {
// 取出图片的路径
let src = isShowBigImage ? $(item).data("lg-img") : $(item).data("sm-img");
let imgUrl = 'url("' + src +'")';
// 设置背景
$(item).css({
backgroundImage: imgUrl
});
// 设置img标签
if(!isShowBigImage){
let $img = "<img src = '" + src + "'>";
$(item).empty().append($img);
}else{
$(item).empty();
}
});
});
// 调用方法
$(window).trigger("resize");
});
在div中：
<!-- 轮播图 -->
<div id="lk_carousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="lk_carousel" data-slide-to="0" class="active"></li>
<li data-target="lk_carousel" data-slide-to="1"></li>
<li data-target="lk_carousel" data-slide-to="2"></li>
</ol>
<!-- 中间滚动的东西 -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-sm-img = "img/slide_01_640x340.jpg" data-lg-img = "img/slide_01_2000x410.jpg">
</div>
<div class="item" data-sm-img = "img/slide_02_640x340.jpg" data-lg-img = "img/slide_02_2000x410.jpg">
</div>
<div class="item" data-sm-img = "img/slide_03_640x340.jpg" data-lg-img = "img/slide_03_2000x410.jpg">
</div>
</div>
<!-- 左右控制器 -->
<a class="left carousel-control" href="#lk_carousel" 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="#lk_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
在css中：
#lk_carousel .item{
background: no-repeat center center;
-webkit-mask-size: cover;
background-size: cover;
}
@media screen and (min-width:800px) {
#lk_carousel .item{
height: 410px;
}
}
此处如果想设置图片轮播的速度可以采用这个方法：
$('.carousel').carousel({
interval: 2000
});
可以用来控制轮播的数量，循环。停止，上一张下一张
（4）关于我们的介绍
栅格布局
关于图片的设置：
在css中：
/****************** 关于我们start*******************/
#lk_about{
padding: 10px 0;
}
/* 设置星星居中 */
#lk_about .title{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
/* 图片大小 */
img[class="img-rounded"]{
width: 300px;
}
#lk_about .row p{
line-height: 23px;
}
/******************关于我们 end*******************/
在html中：
<!---------------------------- 关于我们 start--------------------------------->
<header id="lk_about" class="hidden-xs hidden-sm">
<!-- 标题 -->
<div class = "title text-center">
<h1><strong>关于我们</strong></h1>
<!-- class中的参数为随着屏幕的变化而变化 -->
<img src="./img/star.png" class="img-responsive">
<!-- 主要内容 -->
<div class="container">
<div class="row">
<div class="col-md-8">
<p class="text-muted">
撩课学院是目前领先的it在线培训服务机构，成立于2017年06月，聚集强大的It讲师资源，独特的课程服务模式，通过在线直播，点播，问答，群答疑等方式，真正解决开发者在成长过程中的各种技术瓶颈，帮助学生在it职场取得成功。
</p>
<p class="text-muted">
撩课学院明星讲师云集，包括***、***、***、**、**等十几位专业实践型讲师团队，悉心打造四大学科系列课程，课程体系细致而且全面，全力助力学生成长。
</p>
<p class="text-muted">
撩课许愿课程体系完善，包含HTML5+全栈开发，python+人工智能，JavaEE，Go语言+区块链等。
</p>
<p class="text-muted">
撩课许愿课程体系完善，包含HTML5+全栈开发，python+人工智能，JavaEE，Go语言+区块链等。
</p>
<p class="text-muted">
撩课许愿课程体系完善，包含HTML5+全栈开发，python+人工智能，JavaEE，Go语言+区块链等。
</p>
</div>
<div class="col-md-4">
<img src="./img/team.png" class="img-rounded">
</div>
</div>
</div>
</div>
</header>
<!---------------------------- 关于我们 end--------------------------------->
（5）选项卡
class=“active”//有次属性的选项是莫认真展示的选项
淡入淡出的效果：
在html中：
<!---------------------------- 产品中心 start--------------------------------->
<header id="lk_product">
<div class="container">
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#product1" aria-controls="home" role="tab" data-toggle="tab">在线大学</a></li>
<li role="presentation"><a href="#product2" aria-controls="profile" role="tab" data-toggle="tab">会员专享</a></li>
<li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">免费视频</a></li>
<li class="pull-right hidden-sm hidden-xs"><a aria-controls="settings" role="tab" data-toggle="tab">更多</a></li>
</ul>
<!-- 展示的内容 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="product1"><img src="img/timg%20(1).jpg" width="400px" style="margin-top: 20px;"></div>
<div role="tabpanel" class="tab-pane" id="product2"><img src="img/timg%20(2).jpg" width="400px" style="margin-top: 20px;"></div>
<div role="tabpanel" class="tab-pane" id="product3"><img src="img/timg.jpg" width="400px" style="margin-top: 20px;"></div>
</div>
</div>
</div>
</header>
<!---------------------------- 产品中心 end--------------------------------->
在css中：
/******************产品中心 start*******************/
/* 背景颜色 */
#lk_product{
background-color: #f0f0f0;
padding: 30px 0px;
}
/* 调整距离样式 */
#lk_product .nav{
font-size: 15px;
}
/* 选项的背景颜色 */
#lk_product .nav a{
color: #999999;
}
/* 下边框 */
#lk_product .nav li.active a{
border: none;
background-color: transparent;
border-bottom: 2px steelblue solid ;
}
/******************产品中心 end*******************/
（6）热门课程
在HTML中：
<!----------------------------热门课程 start--------------------------------->
<header id="lk_hot">
<div class="title text-center">
<h1><strong>热门课程</strong></h1>
<!-- class中的参数为随着屏幕的变化而变化 -->
<img src="./img/star.png" class="img-responsive" style="margin-bottom: 20px;">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="cs2.ico">
</a>
</div>
</div>
</div>
</header>
<!----------------------------热门课程 end--------------------------------->
在css中：
/******************热门课程 start*******************/
#lk_hot{
padding: 10px 0;
}
/* 设置星星居中 */
#lk_hot .title{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
/******************热门课程 end*******************/
（7）友情链接
此处不使用任何的框架，只是css样式的控制
/******************友情链接 start*******************/
#lk_link .logos{
list-style: none;
text-align: center;
}
#lk_link .logos ul>li{
display: inline-block;
padding: 20px 30px;
}
/******************友情链接 end*******************/
在html中：
<!---------------------------- 友情链接 start--------------------------------->
<header id="lk_link">
<div class="title text-center">
<h1><strong>友情链接</strong></h1>
<!-- class中的参数为随着屏幕的变化而变化 -->
<img src="img/star.png" class="img-responsive" style="margin: 0 auto;margin-bottom: 10px;">
</div>
<div class="logos">
<ul>
<li><img src="img/google-logo.png" width="50px"></li>
<li><img src="img/facebook-logo.png" width="50px"></li>
<li><img src="img/airbnb-logo.png" width="100px"></li>
<li><img src="img/ibm-logo.png" width="100px"></li>
<li><img src="img/paypal-logo.png" width="100px"></li>
<li><img src="img/swift-logo.png" width="50px"></li>
<li><img src="img/walmart-logo.png" width="100px"></li>
</ul>
</div>
</header>
<!---------------------------- 友情链接 end--------------------------------->
（8）尾部
在css中：
/******************尾部 start*******************/
/* 背景图片 */
#lk_footer{
width: 100%;
height: 200px;
background: url(../img/ft_bg.png) no-repeat center;
color: #FFFFFF;
font-size: 16px;
}
/* 清除样式 */
#lk_footer ul{
list-style: none;
}
/* 分割线 */
#lk_footer .one, #lk_footer .two{
padding: 10px;
border-right: 1px solid #666;
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#lk_footer .one li{
line-height: 40px;
}
#lk_footer .three{
padding: 10px 50px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
#lk_footer .three a{
margin-right: 15px;
text-decoration: none;
}
/*****************尾部 end*******************/
在html中：
<!---------------------------- 尾部 start--------------------------------->
<footer id="lk_footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-1 one">
<div class="row">
<ul class="col-md-6">
<li><a href="#">关于我们</a></li>
<li><a href="#">课程介绍</a></li>
<li><a href="#">热门课程</a></li>
</ul>
<ul class="col-md-6">
<li><a href="#">明式授课</a></li>
<li><a href="#">课堂互动</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<div class="col-md-3 two">
<h5>公司地址：@@@@@@@@@@</h5>
<h5>联系电话：@@@@@@@@@@</h5>
<h5>地址邮箱：@@@@@@@@@@</h5>
</div>
<div class="col-md-3 three">
<h5>联系我们</h5>
<a>
<img src="img/xinlang-h.png" title="微博">
<img src="img/weixin-h.png" title="微信">
</a>
</div>
</div>
</div>
</footer>
<!---------------------------- 尾部 end--------------------------------->
扫一扫
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
