Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Basic template：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="css/bootstrap.min.css" rel="stylesheet"> 12 13 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 14 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 15 <!--[if lt IE 9]> 16 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 17 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <h1>Hello, world!</h1> 22 23 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 24 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 25 <!-- Include all compiled plugins (below), or include individual files as needed --> 26 <script src="js/bootstrap.min.js"></script> 27 </body> 28 </html>
Basic CSS：
1 <style type=”text/css”>
2 .row {
3 margin-right: -15px;
4 margin-left: -15px;
5 }
6 .container {
7 padding-right: 15px;
8 padding-left: 15px;
9 margin-right: auto;
10 margin-left: auto;
11 }
12 </style>
Media queries:
1 /* Extra small devices (phones, less than 768px) */ 2 /* No media query since this is the default in Bootstrap */ 3 4 /* Small devices (tablets, 768px and up) */ 5 @media (min- @screen-sm-min) { ... } 6 7 /* Medium devices (desktops, 992px and up) */ 8 @media (min- @screen-md-min) { ... } 9 10 /* Large devices (large desktops, 1200px and up) */ 11 @media (min- @screen-lg-min) { ... }
Grid options:
|
Extra small devicesPhones (<768px) |
Small devices Tablets (≥768px) |
Medium devicesDesktops (≥992px) |
Large devices Desktops (≥1200px) |
|
|
Grid behavior |
Horizontal at all times |
Collapsed to start, horizontal above breakpoints |
||
|
Container width |
None (auto) |
750px |
970px |
1170px |
|
Class prefix |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
Offsetting columns:
Move columns to the right using .col-md-offset-* classes.
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
Nesting columns：
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
Tables:
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) | |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) | |
| .table-bordered | 为所有表格的单元格添加边框 | |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 | |
| .table-condensed | 让表格更加紧凑 |
Forms:
1 <form> 2 <div class="form-group"> 3 <label for="exampleInputEmail1">Email address</label> 4 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 5 </div> 6 <div class="form-group"> 7 <label for="exampleInputPassword1">Password</label> 8 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 9 </div> 10 <div class="form-group"> 11 <label for="exampleInputFile">File input</label> 12 <input type="file" id="exampleInputFile"> 13 <p class="help-block">Example block-level help text here.</p> 14 </div> 15 <div class="checkbox"> 16 <label> 17 <input type="checkbox"> Check me out 18 </label> 19 </div> 20 <button type="submit" class="btn btn-default">Submit</button> 21 </form>
Button tags:
Use the button classes on an <a>, <button>, or <input> element.
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
Options:
Use any of the available button classes to quickly create a styled button.
<!-- 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>
Sizes:
Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
Images:
<img src="..." class="img-responsive" alt="Responsive image"> <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">