菜鸟教程里面有详细的使用方法教程
菜鸟教程
1.官网下载
bootstrap中文官网
下载完成后解压
一般我们使用导入这个文件夹即可
在页面导入
<script type="text/javascript" src=bootstrap/js/bootstrap.min.js></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/jquery-1.12.4.min.js"></script>
我的目录
若没有下载可以使用在线的样式 这种情况必须要有网
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
即左右留白
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
即左右不留白
container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
<div >
原始效果
</div>
<!-- 布局容器1 -->
<div class="container">
布局容器1
</div>
<div class="container-fluid">
布局容器2
</div>
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
<div class="container">
<div class="row">
<div class="col-md-4">四列</div>
<div class="col-md-8">八列</div>
</div>
</div>
列组合
列组合简单理解就是更改数组来合并列(原则 ：列总和不能超过12，大于12自动换到下一行，有点类似于表格的colspan属性
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: green;">四列</div>
<div class="col-md-8" style="background-color: bisque;">八列</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color: red;">2列</div>
<div class="col-md-2" style="background-color: green;">2列</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: green;">6列</div>
<div class="col-md-6" style="background-color: bisque;">6列</div>
</div>
</div>
若一行占满12 后会整一个直接到下一行
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="row">
<div class="col-md-2 " style="background-color: red;">2列</div>
<div class="col-md-2 col-md-offset-2" style="background-color: green;">2列</div>
</div>
列排序
列排序其实就是改变列的方向，就是改变左右浮动，并设置浮动的距离（和列偏移不同的是 列偏移若是要偏移的那个若后面还有内容会一起偏移并且超过12 会换到下一行 而列排序则是直接被覆盖掉）
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
没排序的
<div class="container">
<div class="row">
<div class="col-md-4 " style="background-color: green;">四列</div>
<div class="col-md-4" style="background-color: bisque;">四列</div>
</div>
</div>
排序后的
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color: green;">四列</div>
<div class="col-md-4" style="background-color: bisque;">四列</div>
</div>
</div>
列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
小注意 ！！
有时候可能在网页上显示完整但在手机屏幕或者在网页不是最小化时显示不完全 这时候我们可以在div中再加上小屏幕的适应
HTML 中的所有标题标签，< h1 > 到 < h6 > 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。把原来的给覆盖掉了
3.1 标题<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
在标题内还可以包含 < small > 标签或赋予 .small 类的元素，可以用来标记副标题。
还提供了
还提供了 .h1 到 .h6 类，为其他不是标题元素的类型赋予标题类型
<div class="h1">你好</div>
段落是排版中另一个重要元素之一，通过.lead来突出强调内容(其作用就是增大文本字号,加粗文本)而且对行高和margin页做相应处理可以使用一下标签给文本做突出样式处理
< small >:小号字
< b > < strong > 加粗
< i > < em > 斜体
<p>我可真厉害啊</p>
<p class="lead">我可真厉害啊</p>
<p class="lead"><small>我</small><strong> 可</strong><em>真厉害啊</em></p>
字体使用 单元格 按钮都可以使用
<p class="text-danger">你好</p>
单元格使用
<table class="table">
<tr class="info">
<th>JAVASE</th>
<th>数据库</th>
<th>JAVAWEB</th>
</tr>
<tr class="success">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="active">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
按钮使用
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
通过文本对齐类，可以简单方便的将文字重新对齐。
3.5列表1)在HTML文档中 列表主要有三种
无序列表 < ul>< li>…< /li>< /ul>
有序列表 < ol>< li>…< /li>< /ol>
自定义列表
2)去点列表
class =“list.unstyled”
<ul class="list-unstyled">
<li>无序1</li>
<li>无序2</li>
</ul>
3)内联列表
class=“list-inline” 把垂直列表换成水平列表，而且去掉项目符号 ,保持水平显示。也可以说内联列表就是为制作水平导航而生
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>
表格样式
为表格提供了一种基本样式和四种附加样式以及一个支持响应的表格，只需要添加对应的类名就可以得到不同的表格风格
基础样式
1）.table 基础表格
<table class="table">
<tr>
<th>JAVASE</th>
<th>数据库</th>
<th>JAVAWEB</th>
</tr>
<tr>
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr>
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
附加样式
1）.table-striped : 斑马线表格
2）.table-bordered 带边框的表格
3）.table-hovew 鼠标悬停高亮的表格
4）.table-condensed : 紧凑型表格和
也可以加入一些效果1
第一个是边框
第二个是格子之间紧凑一点
第三个是鼠标悬停高亮
第五个是隔行换色
**
4.1文本框* form- control 表单元素大小表单控件大小 input-lg input-sm
<div class="row">
<div class="col-md-3 col-sm-3"><input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
<input type="text" class="form-control input-sm"><br>
</div>
</div>
下拉框
<select class="form-control">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
垂直显示
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox" name="hobby"/>唱歌</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby"/>跳舞</label>
</div>
</div>
</div>
水平显示
<div class="row">
<div class="col-md-3">
<label class="checkbox-inline"><input type="checkbox" name="hobby"/>唱歌</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby"/>跳舞</label>
</div>
</div>
水平显示
<div class="row">
<div class="col-md-3">
<label class="checkbox-inline"><input type="radio" name="hobby"/>唱歌</label>
<label class="checkbox-inline"><input type="radio" name="hobby"/>跳舞</label>
</div>
</div>
垂直显示
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label><input type="radio" name="hobby"/>唱歌</label>
</div>
<div class="checkbox">
<label><input type="radio" name="hobby"/>跳舞</label>
</div>
</div>
</div>
基础样式btn
< button class=“btn”>按钮< /button>
<button class="btn">按钮</button>
<!-- Standard button -->
<button type="button" class="btn btn-default">按钮</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（按钮</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">按钮</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">按钮</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">按钮</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">按钮</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">按钮</button>
另外可以把普通标签添加按钮样式
原始
<a href="#" class="btn btn-success">a标签</a><br>
<span class="btn btn-danger">span标签</span><br>
<div class="btn btn-link">div标签</div>
设置按钮大小
btn-lg btn-sm btn-xs
按钮禁用
1.完全禁用点不了
<button class="btn" disabled="disabled">按钮</button>
2.样式禁用 但是还可以用
在样式后面也就是class 里面添加disabled
<button class="btn disabled" >按钮</button>
表单中的每一行的控件写在一个 form-group中
水平排列表单
<form action="#" class="form-horizontal" role ="form">
<h2 class="text-center">用户登录</h2>
<div class="form-group">
<label class="control-label col-md-2" >姓名:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" >密码:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="请输入密码">
</div>
</div>
</form>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="/bootstrap/1.jpg" style="width: 240px;">
<h3>优美风景</h3>
<p>学习之余不妨看看风景休息休息</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢</span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论</span>
</button>
</div>
</div>
</div>
默认的 panel组件所做的只是设置基本的边框 border 和 内补 padding来包含内容
pnael-default 默认样式
panel-heading 面板头
panel -body 面板主体内容跟
<div class="panel panel-success">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
把上面的缩略图加入后
<div class="panel panel-success">
<div class="panel-heading">
<h1 class="text-center">风景合集</h1>
</div>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="/bootstrap/1.jpg" style="width: 240px; height: 300px;">
<h3>优美风景</h3>
<p>学习之余不妨看看风景休息休息</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢</span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论</span>
</button>
</div>
</div>
</div>
</div>
</div>
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
还有很多可以在菜鸟教程上参考
分页导航
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）