目录
一、BootStrap是什么？
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
二、知识点
1.页面引用BootStrap
<head>
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>2.BootStrap栅格layout
BootStrap将网页均分为12分（12个格子），响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- 行必须放置在.container(固定宽度）或 .container-fluid （100% 宽度）中，以便获得适当的对齐alignment和内边距padding
- 使用行来创建列的水平组
- 内容应该放置在列内，唯有列可以是行的直接子元素
- 预定义的网格类，比如.row和.col-xs-x，可用于快速创建网格布局。
- 列通过内边距(padding)来创建列内容之间的间隙
| 栅格样式 | 描述 |
| col-lg-* | large 大型设备（大台式电脑，1200px 起 |
| col-md-* | middle 中型设备（台式电脑，992px 起） |
| col-sm-* | small 小型设备（平板电脑，768px 起） |
| col-xs-* | x-small 超小设备（手机，小于 768px） |
3.常用样式标签
常用样式
| 样式 | 描述 |
|---|---|
| .container | 让元素在容器中水平居中 |
| .col-md-4 | 占几个栅格 |
| .col-md-ofset-4 | 左边空出几个栅格 |
| .col-md-push-8 | 向右浮动几个栅格 |
| col-md-pull-2 | 向左浮动几个栅格 |
代码（示例）：
<!-- 网格偏移：右侧兄弟元素会被向右推移，但不会被覆盖-->
<div class="row">
<!-- 将该元素位置向右偏移2个位置，总占据3个格栅-->
<div class="col-md-1 col-md-offset-2">1</div>
<!-- 将该元素位置向右偏移3个位置，总占据4个格栅-->
<div class="col-md-1 col-md-offset-3">1</div>
<!-- 将该元素位置向右偏移3个位置，总占据5个格栅-->
<div class="col-md-1 col-md-offset-4">1</div>
</div>
<!-- 网格排序：右侧兄弟元素不会被推移，可能会被兄弟元素覆盖-->
<div class="row">
<!-- 将该元素位置向右偏移3个位置，只占据1个位置，可能会被兄弟元素覆盖-->
<!-- push：向右浮动，pull：向左浮动-->
<div class="col-md-1 col-md-push-3" style="background-color: red;">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
</div>
<!-- 列嵌套-->
<div class="row">
<div class="col-md-2" style="background-color: red;">2</div>
<div class="col-md-4" style="background-color: blue;">4</div>
<div class="col-md-6" style="border: 0;">
<div class="row" style="border: 0;">
<!-- 被嵌套的行又会再分出12个格栅-->
<div class="col-md-4" style="background-color: yellow;">子4</div>
<div class="col-md-4" style="background-color: yellow;">子4</div>
<div class="col-md-4" style="background-color: yellow;">子4</div>
</div>
</div>
</div>4.常用组件
按钮组件
语法:
<input type=button class="btn" value="我是按钮">
提示：
btn是所有按钮的基本样式class参数说明：
第一个参数：btn为按钮的基本样式
第二个参数为按钮的颜色样式
语境⾊彩：
btn-default 默认-⽩⾊
btn-success 绿⾊
btn-danger 红色
..
第三个参数为按钮的大小
按钮还有一种默认为整行的效果，称为块级按钮 btn-block
<body>
<div class="container">
<button>原生按钮</button>
<button class="btn btn-default">默认样式按钮</button>
<button class="btn bnt-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-primary">parimary标准</button>
<button class="btn btn-link">link</button>
</div>
</body>
面板组件
1.基本面板
<div class="container">
<!--基础面板-->
<div class="panel panel-default">
<div class="panel-body">
基础面板
</div>
</div>
</div>
2.标题面板
<body>
<div class="container">
<div class="row">
<div class="col-md-3 dd" >
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
小区公示栏
</div>
<!--面板内容-->
<div class="panel-body">
王二麻子家的狗丢了
</div>
</div>
</div>
<div class="col-md-1 dd" ></div>
<div class="col-md-3 dd" >
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
招聘信息
</div>
<!--面板内容-->
<div class="panel-body">
物业招聘保安,要求四肢健全
</div>
</div>
</div>
<div class="col-md-1 dd" ></div>
<div class="col-md-3 dd" >
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
便民公示栏
</div>
<!--面板内容-->
<div class="panel-body">
两室一厅,拎包入住,联系电话:13838338388
</div>
</div>
</div>
<div class="col-ma-1 dd"></div>
</div>
</div>
</body>
导航条
标签式导航
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
</ul>
</div>
</body>
胶囊式导航
<body>
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
</ul>
</div>
</body>
面包屑式导航
<body>
<div class="container">
<ul class="breadcrumb">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
</ul>
</div>
</body>
分页式导航
<body>
<div class="container">
<ul class="pagination">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</body>
翻页式导航
<body>
<div class="container">
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
表单
将表单放置于`.navbar-form`之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。
分类：
垂直表单 vertical（默认） class="form-vertical"
内联 [所有的表单元素显示在⼀⾏内] inline class="form-inline"
⽔平表单 horizontal [分两列，标签，元素] class="form-horizontal"
|-label与input元素放在⼀个div class为form-group以及control-label
|-表单元素放在<div class="col-md-x">内部，并在表单元素指定 class为form-control<body>
<div class="container">
<form action="">
<div class="row">
<div class="col-md-3">
<input type="text"class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" name="" id="">
<option value="">aaa</option>
<option value="">bbb</option>
<option value="">ccc</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3">
<textarea class="form-control"></textarea>
</div>
</div>
<!--<label>用户名</label>-->
<label class="radio">
<input type="radio" name="sex"/>男
</label>
<label class="radio">
<input type="radio" name="sex"/>女
</label>
<label class="radio-inline">
<input type="radio" name="sex"/>男
</label>
<label class="radio-inline">
<input type="radio" name="sex"/>女
</label>
<label class="checkbox">
<input type="checkbox"/>可乐
</label>
<label class="checkbox">
<input type="checkbox"/>咖啡
</label>
<label class="checkbox">
<input type="checkbox"/>茶
</label>
<label class="checkbox-inline">
<input type="checkbox"/>可乐
</label>
<label class="checkbox-inline">
<input type="checkbox"/>咖啡
</label>
<label class="checkbox-inline">
<input type="checkbox"/>茶
</label>
</form>
</div>
</body>
总结:
4575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
