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">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
</body>
<script src="../04-bootstrap/lib/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</html>
栅格系统:
栅格系统（boostrap的核心，也是实现响应式布局的核心，专业术语叫 媒体查询；
bootstrap将屏幕按照宽度分成四种
1.大屏幕lg>1208px
2.中等屏幕md992px-1200px
3.小屏幕sm768px-992px
4.极小屏幕xs<768px
固定用法
1先外层写一个类名字是固定container
2里面写一个类row固定
3根据需求(在什么样的屏幕下一行显示几个元素
bootstrap默认将一行划分成了12份12列1列就占一份
1如果一行超过了12份和浮动的特性一样往下掉
2.container居中的版心宽度会跟随屏幕宽度的变化而变化(不用管多少px版心会自动调整大小就可以了)
有些时候网页设计
需要版心container
全屏.container-fluid
只要你写了栅格代码，那么就不能省略container(版心)-container-fluid(全屏)
1.总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>01-模版.html</title>
<!-- 1 要引入 bootstrap css文件 -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />
</head>
<body>
<!--
栅格系统（boostrap的核心，也是实现响应式布局的核心 媒体查询 ）
小一点的屏幕下 让它 一行显示3个元素
1 bootstrap将屏幕按照宽度分成四种
1 大屏幕 lg >1200px
2 中等屏幕 md 992px-1200px
3 小屏幕 sm 768px-992px
4 极小屏幕 xs <768px
2 固定用法
1 先外层写一个 类 名字是固定 container
2 里面写一个类 row 固定
3 根据需求 （在什么样的屏幕下 一行 显示几个元素 ）
bootstrap 默认将一行 划分成了12份 12列 1列就占一份
-->
<div class="container">
<div class="row">
<!-- 在大屏幕下 每一列占一份 -->
<!-- 在大屏幕下 每一列占三份 -->
<!-- 在大屏幕下 每一列 占2份 -->
<!-- 关键就是 在什么样的屏幕下 每一列占几份 -->
<div class="col-lg-2">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-2">5</div>
<div class="col-lg-2">6</div>
</div>
</div>
</body>
<!-- 2 要引入 jquery.js -->
<script src="./lib/jquery.js"></script>
<!-- 3 引入 bootstrap.js -->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
</html>
2.注意点：
| |
|---|
| 1. 如果一行超过了12份 和浮动的特性一样 往下掉 |
| 2 .container 居中的版心 宽度会跟随屏幕宽度的变化而变化 （不用管多少px 版心会自动调整大小就可以了） |
| 有些时候 网页设计 |
| 需要版心 container |
| 全屏 .container-fluid |
| |
| 只要你写了栅格代码，那么就不能省略 container(版心)-container-fluid(全屏) |
| |
| 3. 要想好 代码在每一种屏幕下的表现 |
| 1. 大屏幕下 一列占一份 |
| 2 .极小屏幕下 一列占二份 |
| 3 .变成 中等屏幕 |
| 仅仅是因为 bootstrap自己额外做了设置而已 |
| 自动设置了 让较大屏幕 去沿用较小屏幕的设置 |
| |
补充：
1 container
2 row
3 如何根据需求来编写合理的栅格系统的代码
1 你要自己去观察 当前的页面在不同宽度下的表现
观察出来 大屏幕下 每一列占几份 col-lg-4
观察出来 中等屏幕下 每一列占几份 col-md-4
观察出来 小等屏幕下 每一列占几份 col-sm-12
观察出来 极小屏幕下 每一列占几份 col-xs-12
-->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">内容即可</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">1</div>
<div class="col-xs-6 col-sm-3">2</div>
<div class="col-xs-6 col-sm-3">3</div>
<div class="col-xs-6 col-sm-3">4</div>
</div>
</div>
实战：
1 栅格系统 方便我们 编写 代码 在不同的宽度下 不同表现的代码 容器而已！
2 栅格系统的核心 也是 媒体查询
3 应用
我们要根据栅格系统对于 不同屏幕的宽度的分类 来找到 当前需求 如何实现
4 比如
1 定版心的容器
-->
<div class="container">
<div class="row">
<div class="col-lg-3 col-xs-12">1 </div>
<div class="col-lg-3 col-xs-12">2 </div>
<div class="col-lg-3 col-xs-12">3 </div>
<div class="col-lg-3 col-xs-12">4 </div>
</div>
</div>
课堂案例-轮播图-腾讯全端技术峰会
<!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>Document</title>
<link rel="stylesheet" href="../../../../lib2-旧版本/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/5.案例.css">
</head>
<body>
<nav id="a" class="navbar navbar-default navbar-fixed-top">
<div class=" container">
<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="../../logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="a" 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="#">Tweb Conf</a></li>
<li><a href="#">SuperStar</a></li>
<li><a href="#">Web前端</a></li>
<li><a href="#">关于</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../uploads/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="../../uploads/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="../../uploads/banner_3.jpg" alt="...">
</div>
<div class="item">
<img src="../../uploads/banner_4.jpg" alt="...">
</div>
</div>
<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="OpenSource">
<div class="container">
<h2 class="text-center">OpenSource/开源项目</h2>
<p class="text-center">种类众多的开源项目，让你爱不释手</p>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 pa"><img src="../../uploads/pro1.jpg" alt=""></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 pa"><img src="../../uploads/pro2.jpg" alt=""></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 pa"><img src="../../uploads/pro3.jpg" alt=""></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 pa"><img src="../../uploads/pro4.jpg" alt=""></div>
</div>
</div>
</body>
<script src="../../../../lib2-旧版本/js/jquery.js"></script>
<script src="../../../../lib2-旧版本/bootstrap/js/bootstrap.min.js"></script>
<script src="../showScreen.js"></script>
</html>
css样式
body {
border: 1px solid transparent;
}
/* 导航条背景颜色 */
.navbar {
background-color: transparent;
border: none;
}
.navbar .navbar-brand img {
padding-top: 15px;
padding-bottom: 0;
}
.navbar #a {
padding-top: 27px;
padding-bottom: 27px;
}
.navbar #a a {
color: #ffffffa6;
}
.navbar #a a:hover {
color: #777;
}
.carousel-inner > .item > img {
height: 400px;
}
/* 开源项目 */
.OpenSource .pa {
overflow: hidden;
position: relative;
margin-bottom: 15px;
}
/* 动画效果 */
.OpenSource .pa::after {
content: "";
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: -100%;
background-image: linear-gradient(-45deg, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.5) 65%, transparent 65%, transparent 100%);
}
.OpenSource img {
width: 100%;
}
@keyframes i {
to {
transform: translateX(250%);
}
}
.pa:hover::after {
animation: i 1s;
}
