bootstrap入门教程
概述
bootstrap简介：
bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
boostrap特点
： 1 ) 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：
2 ) 所有的主流浏览器都支持 bootstrap。
Internet Explorer Firefox Opera Google Chrome Safari
3 ) 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
4 ) 响应式设计：bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
使用步骤
bootstrap的使用步骤：
1.下载bootstrap
http://www.bootcss.com/ 2.导入bootstrap.css文件
3.导入jquery.js
4.导入bootstrap.js
5.导入支持移动设备 支持缩放 其实是1.0
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入css-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<!--导入css.js -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<!--Bootstrap 是移动设备优先的-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个
.container容器。
.container类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
示例：大屏显示6个，中屏显示4个，小屏显示 2个， 最 显示 1一个
<div class="container">
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">1</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">2</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">3</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">4</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">5</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">6</div>
</div>
排版
标题
HTML 中的所有标题标签，
到
均可使用。另外，还提供了
.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 标签或赋予
.small类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<span class="h1">h1. Bootstrap heading <small>Secondary text</small></span>
内联文本
<mark>mark高亮</mark><br/>
<del>del删除</del><br/>
<s>s删除</s><br/>
<ins>ins下划线</ins><br/>
<u>u下划线</u><br/>
<small>small小号</small><br/>
<strong>strong加粗</strong><br/>
<em>em斜体</em><br/>
表格
基本实例
为任意
标签添加.table类可以为其赋予基本的样式
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
条纹状表格
通过
.table-striped类可以给之内的每一行增加斑马条纹样式。
<table class="table table-striped">
带边框的表格
添加
.table-bordered类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
鼠标悬停
通过添加
.table-hover类可以让中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
紧缩表格
通过添加
.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed">
状态类
通过这些状态类可以为行或单元格设置颜色。可以加在行上，也能加在单元格上
| Class | 描述 |
|---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
<table class="table">
<tr class="active">
<td>active</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="success">
<td>success</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="info">
<td>info</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr class="danger">
<td>danger</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td class="success">Larry</td>
<td class="warning">the Bird</td>
<td class="info">@twitter</td>
</tr>
</table>
响应式表格
将任何
.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive">
<table class="table">
表格内容略，注意列要足够多才会有滚动条
</table>
</div>
表单
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了
.form-control类的、 和 元素都将被默认设置宽度属性为width: 100%;。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
<form>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<div class="form-group">
<label for="inputFile">File input</label>
<input type="file" id="inputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
内联表单
为 元素添加
.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。一定要添加
label标签如果你没有为每个输入控件设置
label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only类将其隐藏。
<form class="form-inline">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="doe@emp.com">
</div>
<button type="submit" class="btn">Send invitation</button>
</form>
禁用状态
为输入框设置
disabled属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了not-allowed鼠标状态。
<input class="form-control" type="text" value="disabled state" disabled>
只读状态
为输入框设置
readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
<input class="form-control" type="text" value="readonly state" readonly>
控件尺寸
通过
.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度。
<div class="row">
<div class="col-lg-12">
<input class="form-control input-lg" type="text" value=".input-lg .col-lg-12"/>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<input class="form-control" type="text" value="Default .col-lg-6"/>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<input class="form-control input-sm" type="text" value=".input-sm .col-lg-3"/>
</div>
</div>
组件
字体图标
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 按钮
</button>
分页
<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 class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
标签
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
导航标签
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a>
</li>
<li role="presentation">
<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">aaa</div>
<div role="tabpanel" class="tab-pane" id="profile">bbb</div>
</div>
徽章
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
列表组
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)