Boot Strap
安装路径：https://www.cnblogs.com/Ding1fun/p/15126073.html
模板样式
bootstrap基本模板：
<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标签*必须0放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- 引入bootstrap的css样式文件-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!--引入bootstrap的javascript文件-->
<script src="js/bootstrap.min.js"></script>
</head>
布局容器
1、.container类用于固定宽度并支持响应式布局的容器。
<div class="container">dasakcvgbjh4</div>
2…container-fluid类用于100%宽度，占据全部视口(viewport)的容器。
栅格网格系统
Boot Strap网格系统为12份
必须使用css
container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops），即
超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）
数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。
在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。
具体内容应当放置在列容器之内。
列组合
<div class="container">
<!-- 行-->
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-8">8</div>
</div>
</div>
列偏移
</div><div class="row">
<div class="col-md-1" style="background-color:crimson;">4</div>
<div class="col-md-4 col-md-offset-2" style="background-color:chartreuse;">8</div>
</div>
列排序
改变列的方向（改变左右浮动）并且设置浮动的距离
col-md-push-* ：往后push（右浮动） col-md-pull-* ：往前pull（左浮动）
<!-- 列排序 -->
<div class="container">
<div class="row">
<div class="col-md-3" style="background-color: #0066CC;">列排序</div>
<div class="col-md-3 col-md-pull-2" style="background-color: #FF6666;">左浮动</div>
<div class="col-md-3 col-md-push-1" style="background-color: #FFFF00;">右浮动</div>
</div>
</div>
列嵌套
在一个列中添加一个或者多个行容器，然后在这个行容器中插入列
<!-- 列嵌套 -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-2" style="background-color: #1B6D85;">1-1</div>
<div class="col-md-8" style="background-color: #204D74;">1-2</div>
<div class="col-md-2" style="background-color: #FFCC99;">1-3</div>
</div>
</div>
<div class="col-md-4" style="background-color: #CC9999;">2</div>
<div class="col-md-4" style="background-color: #CCCC99;">3</div>
</div>
</div>
常用样式
排版
标题
BootStrap和普通的HTML页面一样，定义标题都是使用标签
到
，只不过BootStrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题
<h1>h1.Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>
段落
段落是排版中另外一个重要元素之一。通过.lead来突出强调内容分(其作用就是增大文本字号，加粗文本，而且对行高和margin也左相应的处理。可以使用一下标签给文本左突出样式处理)。
:小字号
：加粗
:斜体
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢<em>努力</em><strong>你</strong></p>
强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具体说明如下：
.text-muted:提示，使用浅灰色（#999）
.text-primary:主要，使用蓝色（#428bca）
.text-success:成功，使用浅绿色（#3c763d）
.text-info:通知信息，使用浅蓝色（#31708f）
.text-warning:警告，使用黄色（#8a6d3b）
.text-danger:危险，使用褐色（#a9442）
<div class="text-muted">.text-muted:提示，使用浅灰色（#999）
</div><div class="text-primary">.text-primary:主要，使用蓝色（#428bca）
</div><div class="text-success">.text-success:成功，使用浅绿色（#3c763d）
</div><div class="text-info">.text-info:通知信息，使用浅蓝色（#31708f）
</div><div class="text-warning">.text-warning:警告，使用黄色（#8a6d3b）
</div><div class="text-danger">.text-danger:危险，使用褐色（#a9442）
</div>
对齐效果
在css中常常使用text-align来实现文本的对其风格的设置。
其中主要有四种风格：
左对齐，取值left;
居中对齐，取值center;
右对齐，取值right;
两端对齐，取值justify;
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐。
<div class="text-left">左对齐，取值left;
</div><div class="text-center">居中对齐，取值center;
</div><div class="text-right">右对齐，取值right;
</div><div class="text-justify">两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;两端对齐，取值justify;
</div>
列表
在HTML文档中，列表结构主要有三种：
-
无序列表(
- …
-
有序列表(
- …
-
定义列表(
-
…
- …
去点列表
class=“list-unstyled”
<ul class="list-unstyled">
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
内联列表
class=“list-inline”,把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内敛列表就是为制作水平导航而生
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>
代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在bootstrap主要提供了三种代码风格：
（1）使用>来显示单行内联代码
（2）使用
>来显示多行代码样式：pre-scrollable(height,max-height高度固定为340px,超过存在滚动条)
（3）使用:来显示用户输入代码，如快捷键
单行内联代码
<code> public String hello() {
return "Hello, World!";
}</code>
多行代码
<pre>
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html");
// Hello
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.println("<h1>" + message + "</h1>");
out.println("</body></html>");
}
public void destroy() {
}
}</pre>
有滚轮的代码
<pre class="pre-scrollable">package com.example.bootstrap0516;
import java.io.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
private String message;
public void init() {
message = "Hello World!";
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html");
// Hello
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.println("<h1>" + message + "</h1>");
out.println("</body></html>");
}
public void destroy() {
}
}</pre>
提示快捷键
<p>使用<kbd>ALT+F4</kbd>保存</p>
表格
在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。
下表样式可用于表格中：
| 类 | 描述 |
|---|---|
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
| 联合使用所有表格类 |
<table class="table table-striped table-hover table-bordered table-condensed">
<thead >
<tr>
<th>类</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>.table</td>
<td>为任意 <table> 添加基本样式 (只有横向分隔线)</td>
</tr>
<tr>
<td>.table-striped</td>
<td>在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)</td>
</tr>
<tr>
<td>.table-bordered</td>
<td>为所有表格的单元格添加边框</td>
</tr>
<tr>
<td>.table-hover</td>
<td>在 <tbody> 内的任一行启用鼠标悬停状态</td>
</tr>
<tr>
<td>.table-condensed</td>
<td>让表格更加紧凑</td>
</tr>
<tr>
<td><em>联合使用所有表格类</em></td>
<td></td>
</tr>
</tbody>
提供了五种不同的类名，每种类名控制了行的不同背景颜色
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
<tr class="info">
<td>.table</td>
<td>为任意 <table> 添加基本样式 (只有横向分隔线)</td>
</tr>
表单form-control
表单主要功能是用来与用户左交流的一个网页控件，良好的表单设计能够让王爷更好的沟通。表单中常见的元素主要包括：文本输入框，下拉选择框，单选按钮，复选按钮，文本域和按钮等。\
表单控件
.form-control .input-lg(较大) .input-sm(较小)
<div class="row">
<div class="col-md-2">
<!-- 2 的长度-->
<input type="text" class="form-control " >
<input type="text" class="form-control input-lg " >
<input type="text" class="form-control " >
<input type="text" class="form-control input-sm" >
</div>
</div>
复选框 checkbox
垂直显示：.checkbox
水平显示： .checkbox-inline
</div><div class="row">
<div class="col-md-3">
垂直
<div class="checkbox"> <label> <input type="checkbox" name="h">男</label></div>
<div class="checkbox"> <label> <input type="checkbox" name="h">男</label></div>
水平
<label class="checkbox-inline"> <input type="checkbox" name="sex">女</label>
<label class="checkbox-inline"> <input type="checkbox" name="sex">女</label>
</div>
</div>
</div>
单选框 radio
垂直显示： .radio
水平显示：.radio-inline
<div class="col-md-3">
<div class="radio-inline"> <label> <input type="radio" name="h">男</label></div>
<div class="radio-inline"> <label> <input type="radio" name="h">男</label></div>
<label><input type="radio" name="sex">女</label>
<label><input type="radio" name="sex">女</label>
</div>
按钮btn
（1）使用实现
基础样式：btn
<button class="btn">按钮</button>
滑稽样式：btn-primary btn-info btn-success btn-danger btn-link btn-default
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-default">按钮</button>
多标签支持：使用a div等制作按钮
<a href="##" class="btn btn-info ">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
按钮大小
使用.btn-lg .btn-sm .btn-xs 就可以获得不同尺寸的按钮。
<button class="btn btn-primary btn-xs">按钮</button>
禁用按钮
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
<button class="btn btn-lg disabled">按钮</button>
<button class="btn btn-lg " disabled="disabled">按钮</button>
表单布局
基本的表单结构是bootstrap自带的，个别的表单控件自动接收一些布局样式。下面列出了创建基本表单的步骤：
向父元素添加role=“form”.
把标签和控件放在一个带有class.form-group的
向所有的本文元素,,添加class=“form-control”.
水平表单
向同一行显示form-horizontal
配合bootstrap框架的网格系统。
<form calss="form-horizontal">
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" placeholder="清华输入密码">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="pwd" class="form-control" placeholder="请输入密码">
</div>
<div calss="form-group checkbox">
<label><input type="checkbox"/>记住密码</label>
</div>
<div class="form-group">
<button class="btn btn-default">提交</button>
</div>
</form>
内联表单
将表单的控件都在一行显示form-inline。
注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。
<form calss="form-inline">
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" placeholder="清华输入密码">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="pwd" class="form-control" placeholder="请输入密码">
</div>
<div calss="form-group checkbox">
<label><input type="checkbox"/>记住密码</label>
</div>
<div class="form-group">
<button class="btn btn-default">提交</button>
</div>
</form>
缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题，面熟内容，按钮等。
<body>
<div class="col-lg-3">
<img src="../images/img.png" style="width: 240px;height: 360px">
<div> <button>w</button></div>
</div>
<div class="col-lg-3">
<img src="../images/img.png" style="width: 240px;height: 360px">
<div> <button>w</button></div>
</div>
<div class="col-lg-3">
<img src="../images/img.png" style="width: 240px;height: 360px">
<div> <button>w</button></div>
</div>
面板
默认的.panel组件所左的知识设置基本的边框（border）和内补（padding）来包含内容。
.oanel-default:默认样式。
<div class="panel panel-warning">颜色
<div class="page-header">
<h2>头</h2>
</div>
内容
</div>
插件
导航
使用下拉与按钮组合可以制作导航
要点：
1.基本样式：.nav与"nav-tabs","nav-pills"组合制作导航
2.分类：
（1）标签型(nav-tabs)导航
（2）胶囊型（nav-pills）导航
（3）堆栈（nav-stacked）导航
（4）自适应（nav-justified）导航
（5）面包蟹式（breadcrumb）导航,单独使用样式，不予nav一起使用，直接加入ol,ul中即可，一般用于导航，主要起的作用是告诉用户所处页面的位置（当前位置）。
2.状态：
选中状态 active样式
禁用状态：disable
<ul class="nav nav-pills ">
<li>
<a class="">导航</a>
</li> <li>
<a class="">首页</a>
</li> <li>
<a class="">地址</a>
</li>
</ul>
</div>
分页导航
分页随处可见，分为页码导航和翻页导航。
页码导航：ul标签上加pagination[pagination-lg|pagination-sm]
翻页导航：ul标签上加pager
翻页导航
<ul class=" pager">
<li><a>1上一页</a></li>
<li><a>下一页</a></li>
</ul>
页码导航
<ul class=" pagination">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
下拉菜单
在使用Bootstrap框架的下拉菜单时，必须使用两个js
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
牛逼 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">nb</li>
<li><a>sad
</a></li>
<li class="dropdown-header">666</li></ul></div>
要点：
1.使用一个类名为dropdown或btn-group包裹整个下拉框：
2.默认向下dropdown，向上弹起加入.dropup即可3.使用button作为父菜单，使用类名：dropdown-toggle和自定义date-toggle属性
4.在button中使用font制作下拉箭头
5.对齐方式：
（1）dropdown-menu-left 左对齐 默认样式
（2）dropdown-menu-right 右对齐
6.激活状态（.active）和禁用状态（.disabled）
<ul class=" pagination">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul> <ul class=" pager">
<li><a>1上一页</a></li>
<li><a>下一页</a></li>
</ul>
模态框
（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript
：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：
$(‘#identifier’).modal(options)
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<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">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<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">添加用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="from-group">
<label for="uname" class="col-md-2 control-label">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名"/>
</div>
</div>
<div class="from-group">
<label for="upwd" class="col-md-2 control-label">密码</label>
<div class="col-md-8">
<input type="text" id="upwd" class="form-control"placeholder="请输入密码" />
</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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
r=“请输入姓名”/>
<input type=“text” id=“upwd” class="form-control"placeholder=“请输入密码” />
```
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
