Use of tools
Introducing new labels
Context
Old Style
Add background color: bg-xxx
Insert Symbol icon: caret
Content block center: center-balock
Fast floating
Original format
Respectively to both sides of the floating
Show and hide
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-8">
<title> Bootstrap layout </ title>
<-! Page data source cross-platform compatibility make some notes - >
<Meta HTTP-equiv = "X--the UA-Compatible" Content = "IEs = Edge">
<-! adaptive multi-screen instructions ->
<Meta name = "the viewport" Content = "width = width-Device, Scale =. 1-Initial ">
<-! Awesome-incorporated font ->
<Link the href =" https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css "the rel =" this stylesheet ">
<-! on Bootstrap and jQuery ->
<Link the href =" https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css "the rel = "stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<Script the src = "https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> </ Script>
</ head>
<body>
<h1 of> helper class </ h1 of>
<P> </ P>
<! - context ->
<! - Old style ->
<div class = "Container">
<div class = "Row">
<P> a paragraph </ P>
<P> paragraph two </ P>
<P> paragraph three </ P>
<P> paragraph four </ P>
<P> paragraph five </ P>
</ div>
</ div>
<P> < / P>
<-! change the background color XXX-BG ->
<div class = "Container">
<div class = "Row">
<P class = "bg-primary "> a paragraph </ P>
<P class =" BG-default "> two paragraphs </ P>
<P class =" BG-Success "> three paragraphs </ P>
<P class =" BG- danger "> four paragraph </ p>
<p class="bg-warning">段落五</p>
</div>
</div>
<p></p>
<!--插入符号图标-->
<div class="container">
<div class="row">
<div class="btn-group">
<button class="btn btn-primary">首页</button>
<button class="btn btn-primary">个人资料</button>
<button class="btn btn-primary">邮件 <span class="caret"></span></button>
</div>
</div>
</div>
<p></p>
<!--内容块居中：center-block-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div style="width: 200px" class="bg-danger center-block">
<p> lorem ipsum carrots, enhanced rebates. At other times of the mind, he rejects and sufferings of
the greater, which, being unable, however. Fault easy to strike a wise choice at the right cheering
the entire outdoor pleasure! </ P>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
<p> </ p>
<! -快速浮动->
<! -原格式->
<div class = "container">
<div class = "row">
<div class = "col-MD-12">
<dIV>
<p> lorem ipsum carrots, Minneapolis rebates. Something will happen a lot with the inventor of the pain,
especially less painful ways resilience for the free services do not present any
drives
is willing truth. </ p>
</ DIV>
<DIV>
<p> lorem ipsum carrots, enhanced rebates. Some carrots with the pain they have discovered,
the laborious free especially less like resilience not realizing what services are present, any
drives
is willing truth. </ P>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
<p> < / p>
<div class = "container"
<div class = "col-MD-12">
<! -给定一个宽度->
<div style = "width: 300px; border: 1px solid # 000" class = "pull-left"> <! - -往左: pull-left ->
<p> lorem ipsum carrots, enhanced rebates. Some carrots with the pain they have discovered,
the laborious free especially less like resilience not realizing what services are present, any
drives
is willing truth. </ P>
</ div>
<div style = "width: 300px; border: 1px solid # 000" class = "pull-right"> <! -往左, pull-right ->
<p> lorem ipsum carrots; enhanced rebates. Something will happen a lot with the inventor of the pain,
especially less painful ways resilience for the free services do not present any
drives
is willing truth. </ p>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
<! -显示和隐藏->
< p> </ p>
<! -默认是显示的->
<div class = "container">
<div class = "row">
<p class = "hidden"> lorem ipsum carrots, enhanced rebates . Acquire other selected quo explain the pain
itself, but any of these or similar. Either we welcome the outcome avoid painful times prevents
any <
<p class = "show"> lorem ipsum carrots, enhanced rebates. Acquire other selected quo explain the pain
itself, but any of these or similar. Either we welcome the outcome avoid painful times prevents
any </ p>
<p class = "invisible"> lorem ipsum carrots, enhanced rebates. Acquire other selected quo explain the pain
itself, but any of these or similar. Either we welcome the outcome avoid painful times prevents
any </ p> <! -内容消失,位置不消失: invisible ->
</ DIV>
</ DIV>
</ body>
</ html>