bootstrap 3 remind @ 貓頭鷹的家

MEAT items
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

jQuery
<script
src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
bootstrap script

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Grid System
Containers
<style>
.gray {
background: #ccc ;
padding: 20px ;
}
</style>

<div class="gray">
<div class="container">
<div class="well">My first Container.</div>
</div>
<div class="container-fluid">
<div class="well">My first Container-fluid.</div>
</div>
</div>

row
<div class="container">
<div class="row"><div class="well">My first row</div></div>
<div class="row"><div class="well">My second row</div></div>
<div class="row"><div class="well">My Third row</div></div>
</div>

coloum
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="well">First Coloum</div>
</div>
<div class="col-lg-2">
<div class="well">Second Coloum</div>
</div>
<div class="col-lg-2">
<div class="well">Third Coloum</div>
</div>
<div class="col-lg-2">
<div class="well">Fourth Coloum</div>
</div>
</div>
</div>

Controling devices(xs,sm>=768,md >=992,lg>=1200)
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="well">First Coloum Hellow ,this is for test
many nines for web test.</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="well">Second Coloum </div>
</div>
<div class="clearfix hidden-md hidden-lg"></div>
<div class="col-xs-6 col-md-3">
<div class="well">Third Coloum </div>
</div>
<div class="col-xs-6 col-md-3">
<div class="well">Fourth Coloum </div>
</div>
</div>
</div>

coloum offset
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="well">First coloum</div>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div class="well">Second coloum</div>
</div>
</div>
</div>

nested coloums
<div class="container">
<div class="row">
<div class="col-sm-9">First coloum
<div class="row">
<div class="col-sm-6">
<div class="well">First nested</div>
</div>
<div class="col-sm-6">
<div class="well">Second nested</div>
</div>
</div>
</div>
<div class="col-sm-3">Second coloum</div>
</div>
</div>

Coloum Ordering
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<div class="well">First coloum</div>
</div>
<div class="col-sm-6 col-sm-pull-6">
<div class="well">Second coloum</div>
</div>
</div>
</div>

buttons
<div class="container">
<div class="row">
<div class="well">
<a href="" class="btn">Buttonn</a>
<a href="" class="btn btn-primary">Buttonn</a>
<a href="" class="btn btn-success">Buttonn</a>
<a href="" class="btn btn-info">Buttonn</a>
<a href="" class="btn btn-warning">Buttonn</a>
<a href="" class="btn btn-danger">Buttonn</a>
<a href="" class="btn btn-link">Buttonn</a>
<hr>
<a href="" class="btn btn-warning btn-lg">Buttonn</a>
<a href="" class="btn btn-warning btn-sm">Buttonn</a>
<a href="" class="btn btn-warning btn-xs">Buttonn</a>
<a href="" class="btn btn-warning btn-xs btn-block">Buttonn</a>
<hr>
<button type="button" class="btn btn-info">Button with button tag</button>
</div>
</div>
</div>

gryphicons
<span class="glyphicon glyphicon-star-empty"></span>
<a href="" class="btn btn-info"><span class="glyphicon glyphicon-zoom-out"></span></a>

Forms
<div class="container">
   <form action="">
       <div class="form-group has-warning has-feedback"> //has-warning :color
               <label for="element-1" class="control-label">This is the text of the label</label>
               <input type="text" id="element-1" class="form-control">
               <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

</div>
       <div class="form-group has-error has-feedback">
               <label for="element-2" class="control-label">This is the text of the label 2</label>
               <input type="text" id="element-2" class="form-control">
               <span class="glyphicon glyphicon-remove form-control-feedback"></span>
               <p class="help-block">Enter the password with a capital leter include</p>
       </div>
        <div class="form-group has-success has-feedback">
               <label for="element-5" class="control-label">This is the text of the label 5</label>
               <input type="text" id="element-5" class="form-control">
               <span class="glyphicon glyphicon-ok form-control-feedback"></span>
               <p class="help-block">Enter the password with a capital leter include</p>
       </div>
   </form>

   <hr>
    <form action="" class="form-inline">
       <div class="form-group">
               <label for="element-3" class="sr-only">This is the text of the label 3</label> //sr-only:no show
               <input type="text" id="element-3" class="form-control input-lg" placeholder="Enter email"> //sr-only:gray show at input
       </div>
       <div class="form-group">
               <label for="element-4" class="sr-only">This is the text of the label 4</label>
               <input type="password" id="element-4" class="form-control input-sm" placeholder="Enter password">//password:password format
       </div>
       <div class="checkbox"> //checkbox
           <label for=""><input type="checkbox">Remember me</label>
       </div>
       <button type="button" class="btn btn-primary">Sing in </button>
</form>

<hr>
<form action="">
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder="2 blocks wide">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder="4 blocks wide">
</div>
<div class="col-lg-6">
<input type="text" class="form-control" placeholder="6 blocks wide">
</div>
</div>
</form>
</div>

Table

<div class="container">
<table class="table table-hover">
<tr class="active">
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr class="success">
<td>Robert</td>
<td>Kao</td>
<td>52</td>
</tr>
<tr class="info">
<td>Bill</td>
<td>Chang</td>
<td>36</td>
</tr>
</table>

<hr>
<table class="table table-condensed">
<tr class="warning">
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr class="danger">
<td>Robert</td>
<td>Kao</td>
<td>52</td>
</tr>
<tr>
<td>Bill</td>
<td>Chang</td>
<td>36</td>
</tr>
</table>
</div>

Dropdown
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
cool button <span class="caret"></span>
</button>

<ul class="dropdown-menu">
<li class="dropdown-header">First Header</li>
<li ><a href="">1st item</a></li>
<li class="disabled"><a href="">2nd item</a></li>
<li class="divider"></li>
<li class="dropdown-header">Second Header</li>
<li ><a href="">3rd item</a></li>
<li ><a href="">4th item</a></li>
</ul>
</div>
</div>

Tabs

<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Home" data-toggle="tab">Home</a></li>
<li><a href="#About" data-toggle="tab">About</a></li>
<li><a href="#Videos" data-toggle="tab">Videos</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="Home">
<p>First para hi here</p>
</div>
<div class="tab-pane fade" id="About">
<p>2nd para hi here</p>
</div>
<div class="tab-pane fade" id="Videos">
<p>3rd para hi here</p>
</div>
</div>
</div>

Navbar

<div class="navbar navbar-default navbar-fixed-bottom navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-type="#example">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Wiredwiki</a>
</div>
<div class="collpase navbar-collapse" id="example">
<ul class="nav navbar-nav">
<li><a href="">Link1</a></li>
<li class="active"><a href="">Link2</a></li>
</ul>
<a href="" class="btn btn-primary navbar-btn">A button</a>

<form action="" class="navbar-form navbar-right" role="searce">
<div class="form-group">
<input type="text" class="form-control" placeholder="search this out">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
List Group
<div class="container">
<ul class="list-group">
<li class="list-group-item">Item 1<span class="badge">1</span></li>
<li class="list-group-item">Item 2<span class="badge">2</span></li>
<li class="list-group-item">Item 3<span class="badge">3</span></li>
</ul>
<hr>

<div class="list-group">
<a href="" class="list-group-item active">Item 1</a>
<a href="" class="list-group-item">Item 2</a>
<a href="" class="list-group-item">Item 3</a>
</div>
<hr>
<div class="list-group">
<a href="" class="list-group-item list-group-item-warning">Item 1</a>
<a href="" class="list-group-item list-group-item-success">Item 2</a>
<a href="" class="list-group-item list-group-item-info">Item 3</a>
</div>
<hr>
<div class="list-group">
<a href="" class="list-group-item">
<h1 class="list-group-item-heading">List group heading</h1>
<P class="list-group-item-text">List group paragraph</P>
</a>
<a href="" class="list-group-item">
<h1 class="list-group-item-heading">List group heading</h1>
<P class="list-group-item-text">List group paragraph</P>
</a>
</div>
</div>

Panel
<div class="container">

<div class="panel panel-default">
<div class="panel-heading">Panel Head</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>

Modal
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Active the modal</button>
<div class="modal" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="model-title">This is the heading</h3>
</div>
<div class="modal-body">
Contrary to popular belief, Lorem Ipsum is not simply random text.
</div>
<div class="modal-footer">
<a href="" class="btn btn-default" data-dismiss="modal">Close</a>
<a href="" class="btn btn-primary">Download</a>
</div>
</div>

Collapsible
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collpaseone" data-toggle="collapse" data-parent="accordion">Collapsible panel 1</a>
</h4>
</div>
<div id="collpaseone" class="panel-collapse collapse in">
<div class="panel-body">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</div>
</div>
</div>

<div class="panel-group" id="accordion">
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collpasetwo" data-toggle="collapse" data-parent="accordion">Collapsible panel 2</a>
</h4>
</div>
<div id="collpasetwo" class="panel-collapse collapse ">
<div class="panel-body">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</div>
</div>
</div>

<div class="panel-group" id="accordion">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collpasethree" data-toggle="collapse" data-parent="accordion">Collapsible panel 3</a>
</h4>
</div>
<div id="collpasethree" class="panel-collapse collapse ">
<div class="panel-body">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</div>
</div>
</div>
</div>

carousel(旋轉木馬)
<div class="container">
<div class="carousel slide" data-ride="carousel" id="carousel-ex">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="desktop.jpg" alt="image">
<div class="carousel-caption">
<h2>This is the heading</h2>
<p>This is the paragraph</p>
</div>
</div>
<div class="item">
<img src="brackets.jpg" alt="image">
<div class="carousel-caption">
<h2>This is the heading</h2>
<p>This is the paragraph</p>
</div>
</div>
<div class="item">
<img src="filemanager.jpg" alt="image">
<div class="carousel-caption">
<h2>This is the heading</h2>
<p>This is the paragraph</p>
</div>
</div>
<a href="#carousel-ex" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel-ex" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>

breadcrumb(烹調食物時)在……上覆以麵包屑
<div class="container">
<ol class="breadcrumb">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="active">Video</li>
</ol>
</div>

pagination(頁碼)
<div class="container">
<ul class="pagination pagination-sm">
<li class="disabled"><a href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li class="active"><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">»</a></li>
</ul>

<hr>
<ul class="pager">
<li><a href="">Previous One</a></li>
<li><a href="">Next One</a></li>
</ul>

<hr>
<ul class="pager">
<li class="previous"><a href="">←Previous One</a></li>
<li class="next"><a href="">Next One→</a></li>
</ul>
</div>

Label
<div class="container">
<span class="label label-default">New</span>
<span class="label label-primary">New</span>
<span class="label label-success">New</span>
<span class="label label-info">New</span>
<span class="label label-warning">New</span>
<span class="label label-danger">New</span>
</div>

Jumbotron(超大屏幕)
<header>
<div class="jumbotron">
<div class="container">
<h1 >Hello World</h1>
<h3 >Jumbotron in Bootstrap</h3>
</div>
</div>
</header>

Interactive Thumbnail
<div class="container">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../desktop.jpg" alt="My desktop">
<div class="caption">
<h3>Desktop label</h3>
<p>This is my desktop</p>
<p>
<a href="" class="btn btn-primary" role="button">Button</a>
<a href="" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../brackets.jpg" alt="My brackets">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../filemanager.jpg" alt="My file manager">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="../bootstrap3.jpg" alt="My bootstrap3 floder">
</div>
</div>