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>Titletitle>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js" >script>
<script type="text/javascript" src="js/bootstrap.min.js" >script>
<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">1div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">2div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">3div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">4div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">5div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">6div>
div>
排版
标题
HTML 中的所有标题标签，
到
均可使用。另外，还提供了
.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。在标题内还可以包含 标签或赋予
.small类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary textsmall>h1>
<span class="h1">h1. Bootstrap heading <small>Secondary textsmall>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 Nameth>
<th>Last Nameth>
<th>Usernameth>
tr>
thead>
<tbody>
<tr>
<th scope="row">1th>
<td>Marktd>
<td>Ottotd>
<td>@mdotd>
tr>
<tr>
<th scope="row">2th>
<td>Jacobtd>
<td>Thorntontd>
<td>@fattd>
tr>
<tr>
<th scope="row">3th>
<td>Larrytd>
<td>the Birdtd>
<td>@twittertd>
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>activetd>
<td>Ottotd>
<td>@mdotd>
tr>
<tr class="success">
<td>successtd>
<td>Thorntontd>
<td>@fattd>
tr>
<tr class="info">
<td>infotd>
<td>the Birdtd>
<td>@twittertd>
tr>
<tr class="warning">
<td>warningtd>
<td>the Birdtd>
<td>@twittertd>
tr>
<tr class="danger">
<td>dangertd>
<td>the Birdtd>
<td>@twittertd>
tr>
<tr>
<td class="success">Larrytd>
<td class="warning">the Birdtd>
<td class="info">@twittertd>
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 addresslabel>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
div>
<div class="form-group">
<label for="pwd">Passwordlabel>
<input type="password" class="form-control" id="pwd" placeholder="Password">
div>
<div class="form-group">
<label for="inputFile">File inputlabel>
<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">Submitbutton>
form>
内联表单
为 元素添加
.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。一定要添加
label标签如果你没有为每个输入控件设置
label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only类将其隐藏。
<form class="form-inline">
<div class="form-group">
<label for="inputName">Namelabel>
<input type="text" class="form-control" id="inputName" placeholder="Jane Doe">
div>
<div class="form-group">
<label for="inputEmail" class="sr-only">Emaillabel>
<input type="email" class="form-control" id="inputEmail" placeholder="[email protected]">
div>
<button type="submit" class="btn">Send invitationbutton>
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="#">1a>li>
<li class="active"><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li class="disabled"><a href="#">5a>li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
标签
<span class="label label-default">Defaultspan>
<span class="label label-primary">Primaryspan>
<span class="label label-success">Successspan>
<span class="label label-info">Infospan>
<span class="label label-warning">Warningspan>
<span class="label label-danger">Dangerspan>
导航标签
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Homea>
li>
<li role="presentation">
<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilea>
li>
ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">aaadiv>
<div role="tabpanel" class="tab-pane" id="profile">bbbdiv>
div>
徽章
<button class="btn btn-primary" type="button">
Messages <span class="badge">4span>
button>
列表组
<ul class="list-group">
<li class="list-group-item">Cras justo odioli>
<li class="list-group-item">Dapibus ac facilisis inli>
<li class="list-group-item">Morbi leo risusli>
<li class="list-group-item">Porta ac consectetur acli>
<li class="list-group-item">Vestibulum at erosli>
ul>