bootstrap-bs入门-bs起步-响应式布局-栅格系统-组件-swiper轮播图
卢光远
bs入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bs入门</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#hehe {
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- 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="#">Brand</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">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<button type="button" class="btn btn-warning">按钮</button>
<i class="glyphicon glyphicon-arrow-down"></i>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">我是分组标题</li>
<li class="bg-success"><a href="#">123</a></li>
<li class="disabled"><a href="#">123</a></li>
<li class="dropdown-header">我是分组标题</li>
<li><a href="#" id="hehe">123</a></li>
</ul>
</div>
<!--用bs规定好的html结构来构建html结构，再给具体的标签特定的类名(特定的全局属性)-->
<!--就能实现特定的页面样式与功能-->
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--注: bs是基于jq框架-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
$('#hehe').click(function () {
alert("呵呵");
return false;
})
</script>
</html>
bs起步
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--移动端屏幕适配-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>bs起步</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
body {
background-color: yellow;
}
.container {
background-color: red;
}
.box {
width: 375px;
height: 20px;
background-color: black;
margin-top: 50px;
}
.ct {
height: 30px;
background-color: red;
}
.ctf {
height: 30px;
background-color: orange;
}
</style>
</head>
<body>
<!--container有四种宽度(在屏幕尺寸横向缩放时) => 响应式布局 -->
<div class="container ct">ct</div>
<!--container-fluid宽度永远等于屏幕宽度-->
<div class="container-fluid ctf">ctf</div>
<div class="box"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#">Brand</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">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
响应式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<style>
body {
margin: 0;
}
.wrapper {
height: 60px;
background-color: yellow;
}
/*if (dw<600) {}*/
@media (max-width: 600px) {
.wrapper {
width: auto;
}
}
/*if (dw>900) {}*/
@media (min-width: 900px) {
.wrapper {
width: 850px;
}
}
/*if (dw>600 and dw < 900) {}*/
@media (min-width: 600px) and (max-width: 900px) {
.wrapper {
width: 600px;
}
}
/*if (dw>1000) {}*/
@media (min-width: 1000px) {
.wrapper {
width: 990px;
}
}
/*if (dw>1200) {}*/
@media (min-width: 1200px) {
.wrapper {
width: 1200px;
}
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>栅格系统</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.box {
height: 100px;
background-color: orange;
}
.b2 {
background-color: black;
}
.ele {
height: 100%;
background-color: cyan;
}
</style>
</head>
<body>
<!--bs将父级等分12等分提供给子级使用-->
<!--
<768
768
992
1200
-->
<div class="container">
<div class="b1 box col-sm-4 col-lg-1"></div>
<div class="b2 box col-sm-4 col-lg-8 col-lg-offset-1"></div>
<div class="b3 box col-sm-4 col-lg-1 col-lg-offset-1"></div>
</div>
<hr>
<div class="container">
<div class="b1 box col-sm-4 col-lg-1">
<!--ele并没有与父级等宽，父级装有了子级，就是一个栅格容器(可以均分12等分,有默认padding左右15px)-->
<!--通过.row行的概念来抵消-->
<!--<div class="row">-->
<div class="row ele"></div>
<!--</div>-->
</div>
<div class="b2 box col-sm-4 col-lg-10">
<!--.row默认有margin:-15px用来低效容器的padding:15px，只抵消5px，那么间接就是10px-->
<div class="row ele" style="margin: 0 -5px;"></div>
</div>
<div class="b3 box col-sm-4 col-lg-1">
<div class="row ele"></div>
</div>
</div>
<!--实际开发-->
<div class="ele"></div>
<div class="container">
<div class="row">
<div class="ele"></div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.container {
background-color: pink;
}
.z-btn {
display: block;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#">Brand</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">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)" data-toggle="modal" data-target="#owen">登陆</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="row">
<button type="button" class="btn btn-danger btn-lg col-sm-6 col-sm-offset-3">按钮</button>
<button type="button" class="btn btn-success btn-block z-btn">按钮</button>
<button type="button" class="btn btn-info btn-block">按钮</button>
</div>
<div class="row">
<i class="glyphicon glyphicon-zoom-in"></i>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div class="row">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." 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>
<div class="row">
<!-- Button trigger modal -->
<!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#owen">-->
<!--登录-->
<!--</button>-->
<!-- Modal -->
<div class="modal fade" id="owen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">请登陆</h4>
</div>
<div class="modal-body">
<!--表单-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3"
placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
swiper轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="swiper/swiper.css">
<!-- Demo styles -->
<style>
body {
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 100px;
line-height: 400px;
}
/*.swiper-slide {*/
/*text-align: center;*/
/*font-size: 18px;*/
/*background: #fff;*/
/*!* Center slide text vertically *!*/
/*display: -webkit-box;*/
/*display: -ms-flexbox;*/
/*display: -webkit-flex;*/
/*display: flex;*/
/*-webkit-box-pack: center;*/
/*-ms-flex-pack: center;*/
/*-webkit-justify-content: center;*/
/*justify-content: center;*/
/*-webkit-box-align: center;*/
/*-ms-flex-align: center;*/
/*-webkit-align-items: center;*/
/*align-items: center;*/
/*}*/
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="swiper/swiper.js"></script>
<!-- Initialize Swiper -->
<script>
new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
// 总结:
// 1.引入css与js文件
// 2.按照规则构建html结构
// 3.类名尽量采用默认类名
// 4.一定要声明Swiper对象,提供必要的对象所需属性值
</script>
</body>
</html>
类似资料：