👑 Bootstrap
Bootstrap 教程 | 菜鸟教程 (runoob.com)
注意： 在引入bootstrap.js前必须先引入jquery，因为它的js是依赖于jquery的
bootstrap在html中模板为：
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="./dist/css/bootstrap.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="jquery-1.10.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./dist/js/bootstrap.js"></script>
</head>
<body>
<h1>bootStrap 模板</h1>
</body>
</html>
💍💍布局容器和栅格网格系统
1. 布局容器
- .container类是用于固定宽度并支持响应式布局的容器（固定宽度，意思是两边会有一些留白）
<link href="./dist/css/bootstrap.css" rel="stylesheet">
<div class="container">
.....
</div>
- .container-fluid类是用于100%宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
.....
</div>
2. 栅格网格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行与列的组合来创建页面布局的，你的容器就可以放入这些创建好的布局中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有24或32，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。（注意：网格系统必须引用css）
container,row,xs(xsmall phones),sm(small tablets),md(middle desktops),Ig(larger desktops)
即：超小屏（自动），小屏(750px),中屏(970px)和大屏(1170px)，，，（一个class可以同时写多种情况，系统会自己识别）
数据行(.row)必须包含在容器（.container)中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column),只有列(column)才可以作为行容器(.row)的直接子元素，但列数之和不 能超过平分的总列数，比如12。如果大于12，则自动换到下一行。
具体内容应当放置在列容器(column)之内
2.1 列组合
<div class="container">
<div class="row">
<div class="col-md-2">222</div>
<div class="col-md-8">888</div>
</div>
</div>
2.2 列偏移
比如
col-md-offset-8，也就是在列上加一个offset，后面写的是数字，就是你想移几格就写几（同样不能超过12）
2.3 列排序
- 其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离
- 在Bootstrap框架的网格系统中是 通过添加类名
前co-md-pull-*和后co-md-push-*(其中星号代表移动的列组合数)。往前pull,往后push。- 列排序和列偏移的区别在于👇
- 列偏移：一个元素用了列偏移，在它后面的也会随着偏移
- 列排序：后面的会覆盖前面的
<div class="row">
<div class="col-md-1 col-md-push-10">1</div>
<div class="col-md-1 col-md-pu11-1">25</div>
</div>
2.4 列嵌套
- Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行容器，然后再这个行容器中插入列
<div class="row">
<div class="col-md-6">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">9</div>
<div class="col-md-3">3</div>
</div>
</div>
<div class="col-md-6">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-10">10</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
💍💍常用样式
1. 排版
1.1 标题
Bootstrapi和普通的HTML页面一样，定义标题都是使用标签
<h1>到<h6>。
- 只不过Bootstrap覆盖了其默认的 样式，使用其在所有浏览器下显示的效果一样。
- 为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名。
- 同时后面可以紧跟着一行小的副标题
<sma11></sma11>或使用span标签里的small
<div class="container">
<h1>大标题<small>副标题</small></h1>
<div class="h1">也是标题 <span class="small">副标题</span></div>
</div>
1.2 段落
段落是排版中另一个重要元素之一。
- 通过
.lead来突出强调内容
- 增大文本字号
- 加粗文本
- 而且对 行高和margin也做相应的处理。
可以使用以下标签给文本做突出样式处理：👇
<small>:小号字<b><strong>：加粗<i><em>：斜体
<p class="lead">
<small>以后的</small>
<b>你</b>
会
<i>感谢</i>
现在
<em>努力</em>
的
<strong>你自己</strong>
</p>
1.3 通过颜色表示——强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：👇
- .text-muted:提示，使用浅灰色(#999)
- .text-primary:主要，使用蓝色(#428bca)
- .text-success:成功，使用浅绿色(#3c763d)
- .text-info:通知信息，使用浅蓝色(#31708f)
- .text-warning:警告，使用黄色 (#8a6d3b)
- text-danger:危险，使用褐色(#a94442)
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger'">危险效果</div>
1.4 对齐效果
在CSS中常常使用
text-align来实现文本的对齐风格的设置。其中主要有四种风格：👇
- 左对齐，取值1eft;
- 居中对齐，取值center;
- 右对齐，取值right;
- 两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
（text-left:左对齐，text center:居中对齐，text-right:右对齐，text-justify:两端对齐。）
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p c1ass="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份
或32份，但12份是最常见的，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap
框架中的网格系统就是将容器平分成12份</p>
1.5 列表
在HTML文档中，列表结构主要有三种：
- 无序列表(
<u1><li>...</1i></u1>) - 有序列表(
<o1><1i>...</1i></o1>) - 定义列表(
<d1><dt>标题</dt><dd>内容</dd></d1>)
1.5.1 去点列表
class="list-unstyled"
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</u1>
1.5.2 内联列表
class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生
<ul class="list-inline">
<li>首页</li>
<li>java学院</1i>
<li>在线课堂</li>
</u1>
1.5.3 定义列表
在原有的基础加入了一些样式，使用样式class="dl-horizontal"制作水平定义列表：当标题宽度超过160px
时，将会显示三个省略号。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
//————————
<dl class="dl-horizontal">
<dt>HTML超文本标记语言</dt>
<dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度，否则2个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>
1.6 代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：👇
- 使用
<code></code>来显示单行内联代码- 使用
<pre></pre>来显示多行块代码
- 滚动条样式：
class="pre-scrollable(height,max-height"高度固定，为340px,超过存在滚动条)- 使用
<kbd></kbd>来显示用户输入代码，如快捷键效果TIP:👇
- 如果要显示html的标签（就是写的代码）
<代表<,>代表>
1.7表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
- 基础样式
- .table 基础表格
- table的附加样式
- table-striped 斑马线表格
- table-bordered 带边框的表格
- table-hover 鼠标悬停高亮的表格
- table-condensed 紧凑型表格，单元格没内距或者内距较其他表格的内距小
tr、th、td样式
- .active 将悬停的颜色应用在行或者单元格上
- .success 表示成功的操作
- .info 表示信息变化的操作
- .warning 表示一个警告的操作
- .danger 表示一个危险的操作
比如👇
<table class="table table-bordered table-hover">
<tr class="active">
<th>JavasE</th>
<th>数据库</th>
<th>Javascript</th>
</tr>
<tr class="danger">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="success">
<td>数组</td>
<td>mysq1</td>
<td>ajax</td>
</tr>
</table>
2. 表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。
表单 中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
2.1 表单控件 form-control
.form-control
- test 输入框
- .input-lg（较大）
- .input-sm（较小）
<div class="col-sm-3">
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-1g" />
<input type="text" name="" id="" class="form-control input-sm" />
</div>
- select 下拉框
- multiple="multiple"，多选框（按住ctrl多选）
<select name="" id="" class="form-control" multiple="multiple">
<option value="">请选择城市</option>
<option value="">上海</option>
<option value="">北京</option>
</select>
- textarea 文本域
<div class="row">
<div class="col-md-3">
<textarea class="form-control"></textarea>
</div>
</div>
- checkbox 复选框
- .checkbox 垂直显示
- .checkbox-inline 水平显示
<!--垂直显示-->
// 1. div 要有一个checkbox的类名
// 2. input的类型是checkbox
<div>
<div class="checkbox">
<label><input type="checkbox">游戏</label>
</div>
<div class="checkbox">
<label><input type="checkbox">学习</labe1>
</div>
</div>
<hr>
<!--水平显示-->
// 1. lable标签的类名是checkbox-inline
// 2. input的类型是checkbox
<div>
<label class="checkbox-inline">
<input type="checkbox">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox">学习
</label>
</div>
- radio 单选框 （跟复选框用法是一个道理）
- .radio 垂直显示
- .radio-inline 水平显示
- 单选框之所以是单选框，是因为它们的name相同；而单选框的值取决于你的value值，而不取决于你在外面写的，外面写的只是为了让你看
- button 按钮
- 基础样式：
.btn - 附加样式：
.btn-primarybtn-infobtn-successbtn-warningbtn-dangerbtn-linkbtn-default - 多标签支持：意思是不仅仅是button标签可以用这个样式。a，span，div 也可以用
- 按钮大小：
.btn-lg大，.btn-sm / 或.btn都是正常，.btn-xs小 - 按钮禁用：
1.在标签中添加disabled属性 （disabled="disabled"是真禁用）2.在元素标签中添加类名“disabled”（在class属性中添加disabled只是样式上禁用了，并不是真的禁用了此按钮）
- 基础样式：
<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">a按钮</button>
<a href="#" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div林签按钮</div>
2.2 表单布局（表单布局里放表单控件）
基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的 步骤👇：
- 向父
<form>元素添加role="form"。 - 把标签和控件放在一个带有class.form-group的
<div>中。这是获取最佳间距所必需的。 - 向所有的文本元素
<input>、<textarea>和<select>添加 class="form-control"，也就是添加表单控件
-
水平表单
在
<form>元素里添加 .from-horizontal
<form class="form-horizontal" role="form">
<h2 align="center">用户信息表</h2>
<div class="form-group">
<label for="email" class="control-label col-sm-2">邮箱</label>
<div class="col-sm-10">
<input type="email" id="email" class="form-control" placeholder="请输入邮箱" />
<!-- 这个label标签的for属性，里面所绑定的会与下面input的id相关联，也就是当你点击姓名这个label标签时，会自动聚焦到input上 -->
</div>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-sm-2">密码</label>
<div class="col-sm-10">
<input type="pwd" id="pwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
</form>
- 内联表单
将表单元素全部在一行显示，在<form>元素里添加.form-inline
<form class="form-inline">
....
</form>
3. 缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。
缩略图的实现是配合网格系统一起使用，同时还可以让缩略图配合标题、描述内容，按钮等。
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="./hhhh.jpg" alt="...">
<h3>甄嬛</h3>
<p>钮钴禄氏,28岁</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span></button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</div>
</div>
</div>
4. 面板
默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
- panel-default 默认样式
- panel-heading 面板头
- panel-body 面板主体内容
<div class="panel panel-success">
<div class="panel-heading">
...
</div>
<div class="panel-body">
...
</div>
</div>
5. Bootstrap插件
5.1 导航
Bootstrap 导航元素 | 菜鸟教程 (runoob.com)
- 基本样式
.nav与“nav-tabs”、“nav-pills"组合制作导航 - 分类：
- 标签型(nav-tabs)导航
- 胶囊形(nav-pills)导航
- 堆栈(nav-stacked)导航
- 自适应(nav-justified)导航
- 面包屑式(breadcrumb)导航，单独使用样式，不与nav一起使用，直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
- 状态：
- 选中状态 active 样式
- 禁用状态：disabled
- 二级菜单
5.2 分页导航
分页随处可见，分为 页码导航 和 翻页导航
- 页码导航：ul标签上
.pagination（pagination-lg/pagination-sm） - 翻页导航：ul标签上加
.pager
5.3 下拉菜单
！除了css文件，还有两个js文件（记住：jquery的js文件要在bootstrap之前）
-
使用一个类名为 .dropdown 或 .btn-group 的 div 包裹整个下拉框：
<div class="dropdown"></div> -
默认是向下，是 .dropdown,向上弹起是 .dropup
-
使用 button 作为父菜单，使用类名：.dropdown-toggle和自定义 data-toggle 属性（
data-toggle="dropdown指向div设置的类"）<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> </button>
-
在button中使用 font 制作下拉箭头
<span class="caret"></span> -
下拉菜单项使用一个 ul 列表，并且定义一个类名为 .dropdown-menu
-
分组分割线：li 添加类名 .divider 来实现添加下拉分隔线的功能
-
分组标题：li 添加类名 .dropdown-header 来实现 分组 的功能
-
对齐方式：
- dropdown-menu-left左对齐默认样式
- dropdown-menu-right 右对齐
-
激活状态（默认选中） .active 和禁用状态 .disabled
5.4 模态框
模态框(Modal)是覆盖在父窗体上的子窗体。 通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
模态框默认是关闭的，所以我们需要触发一个事件使模态框打开（所以你把模态框刚复制上去的时候是看不到它的）
所以👇
怎么用（触发模态框）
- 通过 data属性：在控制器元素（比如按钮或者链接）上设置属性
data-toggle="modal意思是当前是个模态框",同时设置data- target="#identifier意思是当前绑定哪个模态框的id"或href="#identifier"来指定要切换的特定的模态框（带有id="identifier")。 - 通过 javaScript：使用这种技术，可以通过lavaScript来调用带有id="identifier" 的模态框：
Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)
$('#identifier').modal(options);
//1. 第一种通过data属性
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
//2. 第二种，通过js
<button class="btn btn-warning" id="btn">打开</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
//！！！！！！！！！！
<button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('#btn').click(function(){
// 手动打开模态框
$('#myModal').modal('show')
})
//点提交关闭模态框
$('#submit_btn').click(function(){
$('#myModal').modal('hide')
})
</script>
