Bootstrap学习总结
引言:
在学习完HTML、CSS、JavaScript、JQuery之后学习了bootstrap相关知识，并做了一些总结，记录自己所学，并加深印象。总共26个部分，学习并掌握了bootstrap的相关基础知识，能够在项目开发送使用相关知识，并调节页面中的相关内容。
Bootstrap网络结构：
image.png
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">
Bootstrap排版：
（1） 强调文本的几种样式
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
（2） 缩写
<abbr title="World Wide Web">WWW</abbr>
（3） 引用
<blockquote> 这是一个带有源标题的引用。
<small>Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</blockquote>
Bootstrap代码样式：
<code><header></code>
Bootstrap表格：
（1） 基本表格
image.png
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
</tbody>
</table>
（2） 条纹表格 <table class="table table-striped">
（3） 带有边框的表格 <table class="table table-bordered">
（4） 悬停的表格 <table class="table table-hover">
（5） 上下文表格 在<tr>标签中引入active、success、warning、danger等样式
Bootstrap表单：
（1） 基本表单
基本表单的样式的垂直的
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
（2） 内联表单
<form class="form-inline" role="form">
（3） 水平表单
<form class="form-horizontal" role="form">
（4） 文本框
<form role="form">
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
（5） 复选框和单选框
需要换行的就直接使用div块，不换行在label标签中使用class="radio-inline"
（6） 选择框
加上multiple可以在按住control选多个选项
<select multiple class="form-control">
<option>1</option>
<option>2</option>
</select>
（7） 表单控件状态 可以在input标签末尾输入disabled或者在fieldset标签中插入disabled，禁用输入控件
可以在div块后面加入has-success、has-warning、has-error中改变这个div的状态和颜色
可以在form-control后面加入input-**改变输入控件的大小
Bootstrap按钮：
（1） 按钮样式
<button type="button" class="btn btn-primary btn-lg">大的</button>
btn-primary/btn-info/btn-success/btn-warning/btn-danger/btn-link
image.png
btn-lg/ btn-sm/ btn-xs/ btn-block
image.png
active/disabled显示按钮的激活状态和禁用状态
Bootstrap图片：
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
Bootstrap字体图标：
class="glyphicon glyphicon-user"
Bootstrap下拉菜单:
image.png
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
Bootstrap按钮组：
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button>
</div>
image.png
Bootstrap输入框组：
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle"> </div>
</form>
Bootstrap导航元素：
（1） 标签式导航菜单 class="nav nav-tabs"
image.png
（2） 胶囊式导航菜单 class="nav nav-pills"
image.png
（3） 垂直胶囊式导航菜单 class="nav nav-pills nav-stacked"
image.png
（4） 导航左右对齐 class="nav nav-pills nav-justified"
image.png
（5） 单独禁用某个菜单上的连接 class="disabled"
image.png
（6） 导航中的下拉菜单
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
</ul>
</li>
Bootstrap导航栏
（1） 默认样式的导航栏
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"> //导航栏的头
<a class="navbar-brand" href="#">菜鸟教程</a>//导航栏的头字体变化
</div>
<div> //添加导航块
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
</ul>
</div>
</div>
</nav>
（2） 响应式导航栏目
a.先建立一个按钮用于显示下拉导航
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
b.再实现具体下拉的导航
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
</ul>
</div>
（3） 导航栏中的表单
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
（4） 在导航栏中添加按钮
要注意的是按钮后面需要添加navbar-btn
<button type="button" class="btn btn-default navbar-btn">
（5） 导航栏中添加文本
使用class="navbar-text"，可以在导航栏中添加文本信息
（6） 导航栏中条件文字图标
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a>
</li>
</ul>
（7） 组件对齐
在元素模块class末尾添加navbar-left 或 navbar-right可以实现左对齐或者右对齐
（8） 将导航栏固定在顶部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
（9） 将导航栏固定在底部
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
（10） 导航栏静态固定在顶部
<nav class="navbar navbar-default navbar-static-top" role="navigation">
（11） 黑底白字的导航栏
<nav class="navbar navbar-inverse" role="navigation">
Bootstrap面包屑导航：
面包屑导航可以在导航中显示当前页的层次结构信息
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
Bootstrap分页：
（1） 默认分页（无序列表） class="pagination"
image.png
（2） 分页的状态
禁用：class="disabled"
默认选中：class="active"
（3） 调整大小
pagination-lg、 pagination-sm …
（4） 默认的翻页
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
image.png
（5） 左右对齐
在<li>中插入 class="previous"左对齐 class="next"右对齐
（6） 翻页的状态
在添加class中添加一个disabled禁用这个标签
Bootstrap标签：
（1） 标签样式
default、primary、success、info、warning、danger
标签的大小可以根据标签内的文字大小进行适应
Bootstrap徽章：
（1） 默认样式
class="badge"
（2） 导航中插入徽章
image.png
Bootstrap超大屏幕：
class="container"
Bootstrap页面标题：
class="page-header"
Bootstrap缩略图：
默认的缩略图class="thumbnail"，会添加四个像素的内边距，和一个灰色的边框，当鼠标放在图像上时，会动画显示出图像的轮廓。
Bootstrap警告：
（1） 默认警告样式
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>
（2） 可取消的警告
需要在div中添加alert-dismissable，且button元素包括data-dismiss="alert"
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 信息！请注意这个信息。
</div>
（3） 给警告增加链接
<a href="#" class="alert-link">成功！很好地完成了提交。</a>
Bootstrap进度条：
（1） 默认进度条
其中width中的百分比表示整体的进度
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
</div>
</div>
（2） 进度条样式
class="progress-bar progress-bar-success"
class="progress-bar progress-bar-info"
class="progress-bar progress-bar-warning"
class="progress-bar progress-bar-danger"
（3） 条纹进度条
class="progress progress-striped"
（4） 带动画的条纹进度条
class="progress progress-striped active"
（5） 进度条堆叠
把多个进度条放进一个progress的div中，后面的进度条会紧紧跟着前面的进度，需要注意总体进度是否超过100%
Bootstrap多媒体对象：
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4> 这是一些示例文本。
</div>
</div>
Bootstrap列表组：
（1） 普通列表组
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
</ul>
（2） 带链接的列表组
<a href="#" class="list-group-item">24*7 支持</a>
（3） 自定义列表组内容
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading"> 入门网站包 </h4>
<p class="list-group-item-text">
您将通过网页进行免费域名注册。 </p>
</a>
Bootstrap面板：
Panel还可以设置各种语境色彩panel-primary、panel-success、panel-info、panel-warning、panel-danger。也可以往里面添加表格、列表等。
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> 带有 title 的面板标题 </h3>
</div>
<div class="panel-body"> 面板内容 </div>
<div class="panel-footer">面板脚注</div>
</div>
Bootstrap Well：
well是一种会使得内容凹陷显示的的class
原创文章转载请标明出处
更多文章请查看
http://www.canfeng.xyz
