Basic template and code comments
<!doctype html>
<html lang="zh-CN"><!--current html The page is in simplified Chinese-->
<head>
<meta charset="utf-8"><!--set up html Character set of the page-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--use IE The latest rendering mode, display page-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
viewport:Viewports, browsers, visual areas on Web pages
Viewport effects:For mobile devices to scale large pages
The following settings are only valid on mobile devices
width=device-width:Sets the width of the viewport device-width:Equipment width
initial-scale=1:Initialize zoom setting the zoom level when the mobile device opens a web page 100% normal
1~5
-->
<!-- The above three meta label*must*Put it at the top, anything else*must*Follow! -->
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap All of JavaScript All plug-ins depend on jQuery，So it must be put in front) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- load Bootstrap All of JavaScript plug-in unit. You can also load only a single plug-in as needed. -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Viewport settings
Common settings for viewports:
Layout container
Layout container Help manual URL link
Note: any element that uses the style of a layout container will be called a layout container. It is recommended to use div as the layout container
Container of layout container
Features: in the middle, with blank space at both ends
code:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--Layout container 1: container-->
<div class="container" style="border: 3px solid red;">
11111
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Layout container 2 - container fluid
Feature: occupies 100% of the width of the viewport
code:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--Layout container 2: container-fluid -->
<div class="container-fluid" style="border: 3px solid red;">
11111
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
grid system
grid system Help document link
Characteristics and cases of grid system
Case demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--Define a layout container-->
<div class="container">
<!--Define a row in the layout container-->
<div class="row">
<!--On rows, define columns-->
<!--lg Is current pc The screen size is fixed-->
<div class="col-lg-2" style="border: solid 2px red;">
The current element occupies two columns
</div>
<div class="col-lg-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
<div class="col-lg-4" style="border: solid 2px red;">
The current element occupies six columns
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Attention
- The writing order of column elements determines the layout order. The column elements written first will be laid out on the row first
- The number of columns occupied by column elements, which defines the size of column elements
- If the total number of columns occupied by column elements is less than or equal to 12, these column elements are also arranged on a row
- If the total number of columns occupied by column elements is greater than or equal to 12, column elements greater than 12 will be arranged in another row
- Grids can be nested infinitely: row column row column
- A row has twelve columns, which means that there are twelve columns under a row element
Grid screen size setting - responsive development
Brief description of screen size:
- large: lg ---- large screen, general pc size
- medium: md ---- medium screen, small pc size
- Small: small ----- small screen, ipad size
- x small: xs ----- ultra small screen, smartphone screen
If the style of the current screen is not set, one element occupies one line by default
When set to xs:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: solid 2px red;">
The current element occupies two columns
</div>
<div class="col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
<div class="col-xs-4" style="border: solid 2px red;">
The current element occupies six columns
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Multiple screen sizes are set together
Method 1:
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
Full code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Method 2
If a screen size is set, the screen larger than this screen size inherits the current setting
For the size smaller than this screen, one element occupies one line by default
Code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
<div class="col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
<div class="col-xs-4" style="border: solid 2px red;">
The current element occupies four columns
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Grid system column offset
Column offset Help document link
Code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red;">
The current element occupies four columns,Column offset 4
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</body>
</html>
list
Inline list
Inline list Help document link
Inline element: on a line. When the element ends, it will not wrap automatically
Code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="list-inline">
<li>
Huyou
</li>
<li>
children
</li>
<li>
Big friend
</li>
</ul>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</body>
</html>
Button
Button Help document link
Note: any html element plus button style will become the corresponding button
Code demonstration:
<button type="button" class="btn btn-default">((default style) Default</button> <button type="button" class="btn btn-primary">((preferences) Primary</button> <button type="button" class="btn btn-success">((successful) Success</button> <button type="button" class="btn btn-info">((general information) Info</button> <button type="button" class="btn btn-warning">((warning) Warning</button> <button type="button" class="btn btn-danger">((danger) Danger</button> <button type="button" class="btn btn-link">((link) Link</button>
Button size setting
Do you need to make the buttons have different sizes? use. btn-lg,. BTN SM or BTN XS can get buttons of different sizes.
Code demonstration:
<p> <button type="button" class="btn btn-primary btn-lg">((large button) Large button</button> <button type="button" class="btn btn-default btn-lg">((large button) Large button</button> </p> <p> <button type="button" class="btn btn-primary">((default size) Default button</button> <button type="button" class="btn btn-default">((default size) Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">((small button) Small button</button> <button type="button" class="btn btn-default btn-sm">((small button) Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">(Ultra small size) Extra small button</button> <button type="button" class="btn btn-default btn-xs">(Ultra small size) Extra small button</button> </p>
Active state
When the button is active, it appears to be pressed down (darker background, darker border night, and inward shadow casting). For the < button > element, it is implemented through the: active state. For < a > elements, it is through Implemented by the active class. However, you can also Active is applied to the (including the aria pressed = "true" attribute), and is programmatically activated.
button element
Because: active is a pseudo state, it does not need to be added, but it can be added when it needs to show the same appearance Active class.
Code demonstration:
<button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">Button</button>
Link (< a >) element
You can add for buttons created based on < a > elements active class.
Code demonstration:
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
Disabled state
By setting the opacity property for the background of the button, you can render an effect that cannot be clicked.
button element
Add the disabled attribute to the < button > element to make it appear disabled.
Code demonstration:
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
Link (< a >) element
Add for buttons created based on < a > elements disabled class.
The writing icon turns gray, and there is no mark prohibiting clicking on the mouse:
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Another way of writing is that after the mouse is placed in the icon, there is a mark prohibiting clicking
<a href="#" class="btn btn-primary btn-lg" disabled="disabled">Primary link</a> <a href="#" class="btn btn-default btn-lg" disabled="disabled">Link</a>
Navigation bar
Navigation bar Help document link
Reverse color navigation bar
Code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Navigation icon, Hamburg button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!--sr-only Reader specific-->
<span class="sr-only">This is the hamburger button</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Navigation main part -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#"> Dahu personal homepage < span class =" SR only "> (current) < / span ></a></li>
<li><a href="#"> big flicker Legion</a></li>
<!--drop-down menu -->
<li class="dropdown">
<a href="#"Class =" dropdown toggle "data toggle =" dropdown "role =" button "aria haspopup =" true "aria expanded =" false "> more < span class =" caret "> < / span ></a>
<ul class="dropdown-menu">
<li><a href="#"> hobbies</a></li>
<li><a href="#"> specialty</a></li>
<li><a href="#"> wealth</a></li>
<!--Split line-->
<li role="separator" class="divider"></li>
<li><a href="#"> experience</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"> School</a></li>
</ul>
</li>
</ul>
<!--Let the forms of the submitted parts be arranged on the right-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</nav>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Rotation map
Rotation map Help document link
Code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Rotation map -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- DoT -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- The main part of the rotating picture -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../funImage/1.jpg"/>
<div class="carousel-caption">
Description of picture 1
</div>
</div>
<div class="item">
<img src="../funImage/2.jpg"/>
<div class="carousel-caption">
Description of picture 2
</div>
</div>
<div class="item">
<img src="../funImage/3.jpg"/>
<div class="carousel-caption">
Description of picture 3
</div>
</div>
<div class="item">
<img src="../funImage/bartlesvillecf.jpg"/>
<div class="carousel-caption">
Description of picture 4
</div>
</div>
</div>
<!-- Left and right control buttons -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Timed switching rotation chart
Rotation chart DIV timing chart changing attribute:
Data interval: millisecond value
Code demonstration:
<!-- Rotation map --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
Note: the ID of more than one rotation chart must be modified
At the same time, it is also necessary to modify the rotation chart id controlled by the small circle point and the rotation chart id controlled by the left and right buttons
Code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Rotation chart 2 -->
<div id="lbt1" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- DoT -->
<ol class="carousel-indicators">
<li data-target="#lbt1" data-slide-to="0" class="active"></li>
<li data-target="#lbt1" data-slide-to="1"></li>
<li data-target="#lbt1" data-slide-to="2"></li>
<li data-target="#lbt1" data-slide-to="3"></li>
</ol>
<!-- The main part of the rotating picture -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../funImage/1.jpg"/>
<div class="carousel-caption">
Description of picture 1
</div>
</div>
<div class="item">
<img src="../funImage/2.jpg"/>
<div class="carousel-caption">
Description of picture 2
</div>
</div>
<div class="item">
<img src="../funImage/3.jpg"/>
<div class="carousel-caption">
Description of picture 3
</div>
</div>
<div class="item">
<img src="../funImage/bartlesvillecf.jpg"/>
<div class="carousel-caption">
Description of picture 4
</div>
</div>
</div>
<!-- Left and right control buttons -->
<a class="left carousel-control" href="#lbt1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#lbt1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Rotation chart 2 -->
<div id="lbt2" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- DoT -->
<ol class="carousel-indicators">
<!--Rotation chart controlled by small dots id Also need to modify-->
<li data-target="#lbt2" data-slide-to="0" class="active"></li>
<li data-target="#lbt2" data-slide-to="1"></li>
<li data-target="#lbt2" data-slide-to="2"></li>
<li data-target="#lbt2" data-slide-to="3"></li>
</ol>
<!-- The main part of the rotating picture -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../funImage/1.jpg"/>
<div class="carousel-caption">
Description of picture 1
</div>
</div>
<div class="item">
<img src="../funImage/2.jpg"/>
<div class="carousel-caption">
Description of picture 2
</div>
</div>
<div class="item">
<img src="../funImage/3.jpg"/>
<div class="carousel-caption">
Description of picture 3
</div>
</div>
<div class="item">
<img src="../funImage/bartlesvillecf.jpg"/>
<div class="carousel-caption">
Description of picture 4
</div>
</div>
</div>
<!-- Left and right control buttons -->
<!--Rotation chart controlled by left and right buttons id Also need to modify-->
<a class="left carousel-control" href="#lbt2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#lbt2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Typesetting - alignment
Typesetting – alignment Help document link
Code demonstration:
<div class="text-center"> Big flicker and children <img src="../funImage/I fucking refused.jpg"/> </div>
Form Elements
form Help document link
Horizontally arranged form code demonstration:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template 1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">user name</label>
<div class="col-sm-5">
<!--placeholder:Alternate text-->
<input type="text" class="form-control" placeholder="enter one user name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">password</label>
<div class="col-sm-5">
<input type="password" class="form-control" placeholder="Please input a password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Form verification
Form verification Help document link
Code demonstration:
<div class="form-group has-error"> <div class="form-group has-success">
Paging bar
Paging bar Help document link
Code demonstration:
<nav aria-label="Page navigation"> <!--Page bar overall list--> <ul class="pagination"> <!--previous page--> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--Index page--> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--next page--> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
Paging bar activation status
Code demonstration:
<li class="active"><a href="#">1</a></li>
Disabled state
Code demonstration:
<!--previous page--> <li class="disabled">
It is better to delete the herf attribute of the a tag in the unavailable tab, so that the user will not jump again after clicking.