bootstrap 笔记
1. 引入方式
- 通过官网下载静态资源到本地 bootstrap
- 通过cdn服务直接引入 bootcdn
-
注意：bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery，并且jQuery一定要在bootstrap前导入！
2. 布局容器
"""bootstrap 就是给 html标签加上class，然后改变其样式"""
# 第一种布局容器
<div class="container">
...
</div>
# 第二种布局容器
<div class="container-fluid">
...
</div>
3. 栅格系统（学会布局就相当于学会了bootstrap）
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕变化而变化
"""
如果只写.col-md-这个类的话，只能在桌面显示器中响应式布局，在编程手机端现实时需要加上.col-xs-这个类。如果想要在四种尺寸中都响应式布局，需要将四个类都加在所在区域
.col-xs- .col-sm- .col-md- .col-lg-
超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
class="row"： 将其所在的区域划分成12份，可以按照col-md-3来去值（这里取3份）
col-md-offset-2： 将div从左到右移动两份
"""
<div class="container">
<div class="row">
<div class="col-md-3 c1 col-xs-3"></div>
<div class="col-md-8 c1 col-xs-8">
<div class="row">
<div class="col-md-7 c2 col-xs-7"></div>
<div class="col-md-5 c2 col-xs-5"></div>
</div>
</div>
<div class="col-md-1 c1 col-xs-1"></div>
<div class="col-md-8 c1 col-md-offset-2"></div>
<div class="col-md-3 c1"></div>
</div>
</div>
4. 排版布局
<h1>yebobo <small>星星</small></h1> # 主标题，副标题
<p class="lead text-center">lalalala</p> # 居中
<abbr title="详细的解释">小朋友 你是啥子</abbr> # 解释
<blockquote class="blockquote-reverse"> # 名人语句
<p>啦啦啦啦啦</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
5. css、组件、js插件
# 这里只列出一些常用的插件，不一一全部列举
"""
1. 栅格布局（需要考虑到响应式布局也就是使用栅格参数）
以下都是需要布局好之后，将响应组件放到指定地方：
2. 表格、表单、按钮
3. <img src="..." class="img-responsive"> 响应式图片
4. 导航、分页、列表组、面板
5. 模态框、标签页
"""
6. 弹出框(漂亮样式)
7. 小案例(类似于左侧菜单栏特效)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>类似于左侧菜单栏</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.logo {
color: pink;
/*text-align: center;*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.right {
float: right;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center logo">retional shark</h2>
</div>
<div class="col-md-3" >
<ul class="nav nav-tabs" style="margin-top: 10px;">
<li role="presentation"><a href="#" class="right">信息</a></li>
<li role="presentation"><a href="#" class="right">头像</a></li>
<li role="presentation"><a href="#" class="right">用户名</a></li>
<li role="presentation"><a href="#" style="float: right;">设置</a></li>
<li role="presentation"><a href="#" style="float: right;">设置</a></li>
</ul>
</div>
</div>
<div class="col-md-1 col-md-3 c1" id="d1">
<ul class="list-group">
<li class="list-group-item"><a href="#">信息管理</a></li>
<li class="list-group-item">
<a href="#">可视化</a>
</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">
<span class="badge">新</span> 24*7 支持
</li>
<li class="list-group-item">每年更新成本</li>
<li class="list-group-item">
<span class="badge">新</span> 折扣优惠
</li>
</ul>
</div>
<div class="col-md-11 c2" id="d2">
<button class="btn btn-default btn1">点击</button>
</div>
</div>
</div>
<script>
$('.btn1').on('click', function() {
$("#d1").toggleClass("col-md-1")
if ($("#d1").hasClass("col-md-1")) {
$("#d2").removeClass("col-md-9")
} else {
$("#d2").addClass("col-md-9")
}
$("#d3").toggleClass("col-md-1")
})
// $('#d1').hover(
// function() {
// $("#d1").removeClass("col-md-1")
// $("#d2").addClass("col-md-9")
// },
// function() {
// $("#d1").addClass("col-md-1")
// $("#d2").removeClass("col-md-9")
// }
// )
</script>
</body>
</html>