## Bootstrap：
1. Concept: a front-end development framework, Bootstrap, from Twitter, is currently very popular front-end framework. Bootstrap is based on HTML, CSS, JavaScript, and it is simple and flexible, so that Web developers more quickly.
* Frame: a semi-finished software, developers can frame basis, during development, simplifying coding.
* Benefits:
1. Define a lot of js and css style plug-ins. Our developers can use these styles and effects plug-ins get rich pages.
2. Response layout.
* A page with different resolutions compatible devices.
* Frame: a semi-finished software, developers can frame basis, during development, simplifying coding.
* Benefits:
1. Define a lot of js and css style plug-ins. Our developers can use these styles and effects plug-ins get rich pages.
2. Response layout.
* A page with different resolutions compatible devices.
2. Quick Start
1. Download Bootstrap
2. In these three project folder
3. Create a html page, introduce the necessary resource files
<! DOCTYPE HTML>
<HTML lang = "ZH-the CN">
<head>
<Meta charset = "UTF-. 8">
<Meta HTTP-equiv = "X--the UA-Compatible" Content = "IEs = Edge">
< name = meta "the viewport" content = "width = width-Device, Initial-Scale =. 1">
<-! * the three meta tag must be placed on top *, any other content * * to be followed thereafter! ->
<title> Bootstrap the HelloWorld </ title>
<-! Bootstrap ->
<Link href = "CSS / bootstrap.min.css" rel = "stylesheet">
<-! JQuery (JavaScript plug-ins for all of Bootstrap rely jQuery, it must be placed in the front) ->
<Script the src = "JS / jQuery-3.2.1.min.js"> </ Script>
<! - Bootstrap loading of all JavaScript plugins. You can also load only a single plug-in needed.
-> <Script the src = "JS / bootstrap.min.js"> </ Script>
</ head>
<body>
<h1> Hello, World! </ h1 of>
</ body>
</ HTML>
## responsive layout
* the same set of pages can be compatible with different resolution devices.
* Achieved: the system depends on the grid: the grid line is equally divided into 12, representing several grid elements can be specified
* steps:
1. Define the container. Corresponding to the previous table,
* vessel classification :
1. Container: both sides of blank
2. container-fluid: each device is 100% of the width
2 is defined rows. Before the equivalent tr style: Row
3. defined elements. The element specified in the different devices, the number of occupied lattice. Style: col- equipment code - the number of lattice
* Equipment Code :
1. XS: ultra-small mobile phone screens (<768px): COL-XS-12 is
2. SM: small screen plate (≥768px)
3. MD: medium screen desktop monitors (≥992px)
4. LG: large screen large desktop monitor (≥1200px)
* the same set of pages can be compatible with different resolution devices.
* Achieved: the system depends on the grid: the grid line is equally divided into 12, representing several grid elements can be specified
* steps:
1. Define the container. Corresponding to the previous table,
* vessel classification :
1. Container: both sides of blank
2. container-fluid: each device is 100% of the width
2 is defined rows. Before the equivalent tr style: Row
3. defined elements. The element specified in the different devices, the number of occupied lattice. Style: col- equipment code - the number of lattice
* Equipment Code :
1. XS: ultra-small mobile phone screens (<768px): COL-XS-12 is
2. SM: small screen plate (≥768px)
3. MD: medium screen desktop monitors (≥992px)
4. LG: large screen large desktop monitor (≥1200px)
* Note:
1. If the number of grid line exceeds 12, the excess wrap.
2. Raster upward compatible class attributes. Class is used for the screen grid width greater than or equal to the size of the cut-off point device.
3. If the actual width is smaller than the minimum value of the device class attributes raster device code, an element will be covered with a whole line.
1. If the number of grid line exceeds 12, the excess wrap.
2. Raster upward compatible class attributes. Class is used for the screen grid width greater than or equal to the size of the cut-off point device.
3. If the actual width is smaller than the minimum value of the device class attributes raster device code, an element will be covered with a whole line.
## CSS style and JS plugins
globally CSS styles:
* button: class = "btn btn-default"
* Image:
* class = "img-responsive": pictures of any size are 100%
* Picture shape
* <img src = "..." alt = " ..." class = "img-rounded">: Square
* <img src = "..." alt = "..." class = "img-circle">: circular
* <img src = "..." alt = "..." class = "img-thumbnail">: frame
* table
* table
* table-bordered
* table hover-
* form
* item added to the table: class = "form-Control"
2. components:
* navigation
* bar tab
3. widget:
* FIG rotation
globally CSS styles:
* button: class = "btn btn-default"
* Image:
* class = "img-responsive": pictures of any size are 100%
* Picture shape
* <img src = "..." alt = " ..." class = "img-rounded">: Square
* <img src = "..." alt = "..." class = "img-circle">: circular
* <img src = "..." alt = "..." class = "img-thumbnail">: frame
* table
* table
* table-bordered
* table hover-
* form
* item added to the table: class = "form-Control"
2. components:
* navigation
* bar tab
3. widget:
* FIG rotation
Case ##
<! DOCTYPE HTML>
<HTML lang = "the CN-ZH">
<head>
<Meta charset = "UTF-. 8">
<Meta HTTP-equiv = "X--the UA-Compatible" Content = "IEs = Edge ">
<meta name =" viewport "content =" width = Device-width, Initial-Scale = 1 ">
<-! the three meta tags * must * on the front, any other content * must * follow thereafter! ->
<title> Bootstrap the HelloWorld </ title>
<-! Bootstrap ->
<Link href = "CSS / bootstrap.min.css" rel = "stylesheet">
<-! JQuery (JavaScript plug-ins for all of Bootstrap rely jQuery, it must be placed in the front) ->
<Script the src = "JS / jQuery-3.2.1.min.js"> </ Script>
<! - Bootstrap loading of all JavaScript plugins. You can also load only a single plug-in needed. ->
<Script the src = "JS / bootstrap.min.js"> </ Script>
<style>
.paddtop{
padding-top: 10px;
}
.search-btn{
float: left;
border:1px solid #ffc900;
width: 90px;
height: 35px;
background-color:#ffc900 ;
text-align: center;
line-height: 35px;
margin-top: 15px;
}
.search-input{
float: left;
border:2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 5px;
margin-top: 15px;
}
.jx{
border-bottom: 2px solid #ffc900;
padding: 5px;
}
.company{
height: 40px;
background-color: #ffc900;
text-align: center;
line-height:40px ;
font-size: 8px;
}
</style>
</head>
<body>
<!-- 1.页眉部分-->
<header class="container-fluid">
<div class="row">
<img src="img/top_banner.jpg" class="img-responsive">
</div>
<div class="row paddtop">
<div class="col-md-3">
<img src="img/logo.jpg" class="img-responsive">
</div>
<div class="col-md-5">
<input class="search-input" placeholder="请输入线路名称">
<a class="search-btn" href="#">搜索</a>
</div>
<div class="col-md-4">
<img src="img/hotel_tel.png" class="img-responsive">
</div>
</div>
<!--导航栏-->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- 定义汉堡按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--轮播图-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<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>
</div>
</header>
<!-- 2.主体部分-->
<div class="container">
<div class = "Row JX">
<IMG the src = "IMG / icon_5.jpg">
<span> horse selection </ span>
</ div>
<div class = "Row paddtop">
<div class = "COL . 3--md ">
<div class =" thumbnail The ">
<IMG the src =" IMG / jiangxuan_3.jpg "Alt =" ">
<P> Shanghai direct 4 late free trimethylene 5 days (pre + Parental Spring / honeymoon / leisure preferred Hotels optionally + + shuttle machine) </ P>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
<div class = "the MD-COL- 3 ">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 < / font>
</ div>
</ div>
<div class = "MD--COL. 3">
<div class = "thumbnail The">
<IMG the src = "IMG / jiangxuan_3.jpg" Alt = "">
<P> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
<div class = "MD--COL. 3">
< div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 < / font>
</ div>
</ div>
</ div>
<div class = "Row JX">
<img src = "img / icon_6.jpg">
<span> domestic travel </ span>
</ div>
< class = div "Row paddtop">
<div class = "COL-MD-. 4">
<IMG the src = "IMG / guonei_1.jpg">
</ div>
<div class = "MD--COL. 8">
<div class = " row">
<div class="col-md-4">
<div class="thumbnail">
<img src = "img / jiangxuan_3.jpg" alt = "">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + Airport transfer optional) </ P>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
<div class = "COL-MD-. 4">
<div class = "thumbnail The">
<IMG the src = "img / jiangxuan_3.jpg" alt = "">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels + optional shuttle machine) </ p >
<font Color = "Red"> & Yen; 699 </ font>
</div>
</div>
<div class="col-md-4">
<div class = "thumbnail The">
<img src = "img / jiangxuan_3.jpg" alt = "">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels optionally + shuttle machine) </ P>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
</ div>
<div class = "Row">
<div class = ". 4-COL-MD">
<div class = "thumbnail The">
<IMG the src = "IMG / jiangxuan_3.jpg" Alt = "">
<p> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 < / font>
</ div>
</ div>
<div class = "COL-MD-. 4">
<div class = "thumbnail The">
<IMG the src = "IMG / jiangxuan_3.jpg" Alt = "">
<P> Direct Shanghai Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 </ font>
</ div >
</ div>
<div class = "COL-MD-. 4">
<div class = "thumbnail The">
<IMG the src = " img / jiangxuan_3.jpg "alt =" ">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ p>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
! <- 3. footer - >
<footer class = "Container-Fluid">
<div class = "Row">
<IMG the src = "IMG / footer_service.png" class = "IMG-responsive">
</ div>
<div class = "Row Company" >
Jiang Su Chuanzhi podcast educational Technology Co., Ltd. All Rights Reserved Copyright 2006-2018, All Rights Reserved SU ICP 16,007,882
</ div>
</ footer>
</body>
</html>
<! DOCTYPE HTML>
<HTML lang = "the CN-ZH">
<head>
<Meta charset = "UTF-. 8">
<Meta HTTP-equiv = "X--the UA-Compatible" Content = "IEs = Edge ">
<meta name =" viewport "content =" width = Device-width, Initial-Scale = 1 ">
<-! the three meta tags * must * on the front, any other content * must * follow thereafter! ->
<title> Bootstrap the HelloWorld </ title>
<-! Bootstrap ->
<Link href = "CSS / bootstrap.min.css" rel = "stylesheet">
<-! JQuery (JavaScript plug-ins for all of Bootstrap rely jQuery, it must be placed in the front) ->
<Script the src = "JS / jQuery-3.2.1.min.js"> </ Script>
<! - Bootstrap loading of all JavaScript plugins. You can also load only a single plug-in needed. ->
<Script the src = "JS / bootstrap.min.js"> </ Script>
<style>
.paddtop{
padding-top: 10px;
}
.search-btn{
float: left;
border:1px solid #ffc900;
width: 90px;
height: 35px;
background-color:#ffc900 ;
text-align: center;
line-height: 35px;
margin-top: 15px;
}
.search-input{
float: left;
border:2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 5px;
margin-top: 15px;
}
.jx{
border-bottom: 2px solid #ffc900;
padding: 5px;
}
.company{
height: 40px;
background-color: #ffc900;
text-align: center;
line-height:40px ;
font-size: 8px;
}
</style>
</head>
<body>
<!-- 1.页眉部分-->
<header class="container-fluid">
<div class="row">
<img src="img/top_banner.jpg" class="img-responsive">
</div>
<div class="row paddtop">
<div class="col-md-3">
<img src="img/logo.jpg" class="img-responsive">
</div>
<div class="col-md-5">
<input class="search-input" placeholder="请输入线路名称">
<a class="search-btn" href="#">搜索</a>
</div>
<div class="col-md-4">
<img src="img/hotel_tel.png" class="img-responsive">
</div>
</div>
<!--导航栏-->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- 定义汉堡按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--轮播图-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<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>
</div>
</header>
<!-- 2.主体部分-->
<div class="container">
<div class = "Row JX">
<IMG the src = "IMG / icon_5.jpg">
<span> horse selection </ span>
</ div>
<div class = "Row paddtop">
<div class = "COL . 3--md ">
<div class =" thumbnail The ">
<IMG the src =" IMG / jiangxuan_3.jpg "Alt =" ">
<P> Shanghai direct 4 late free trimethylene 5 days (pre + Parental Spring / honeymoon / leisure preferred Hotels optionally + + shuttle machine) </ P>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
<div class = "the MD-COL- 3 ">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 < / font>
</ div>
</ div>
<div class = "MD--COL. 3">
<div class = "thumbnail The">
<IMG the src = "IMG / jiangxuan_3.jpg" Alt = "">
<P> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
<div class = "MD--COL. 3">
< div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 < / font>
</ div>
</ div>
</ div>
<div class = "Row JX">
<img src = "img / icon_6.jpg">
<span> domestic travel </ span>
</ div>
< class = div "Row paddtop">
<div class = "COL-MD-. 4">
<IMG the src = "IMG / guonei_1.jpg">
</ div>
<div class = "MD--COL. 8">
<div class = " row">
<div class="col-md-4">
<div class="thumbnail">
<img src = "img / jiangxuan_3.jpg" alt = "">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + Airport transfer optional) </ P>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
<div class = "COL-MD-. 4">
<div class = "thumbnail The">
<IMG the src = "img / jiangxuan_3.jpg" alt = "">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels + optional shuttle machine) </ p >
<font Color = "Red"> & Yen; 699 </ font>
</div>
</div>
<div class="col-md-4">
<div class = "thumbnail The">
<img src = "img / jiangxuan_3.jpg" alt = "">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels optionally + shuttle machine) </ P>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
</ div>
<div class = "Row">
<div class = ". 4-COL-MD">
<div class = "thumbnail The">
<IMG the src = "IMG / jiangxuan_3.jpg" Alt = "">
<p> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 < / font>
</ div>
</ div>
<div class = "COL-MD-. 4">
<div class = "thumbnail The">
<IMG the src = "IMG / jiangxuan_3.jpg" Alt = "">
<P> Direct Shanghai Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + luxury Hotels + optional shuttle machine) </ the p->
<font Color = "Red"> & Yen; 699 </ font>
</ div >
</ div>
<div class = "COL-MD-. 4">
<div class = "thumbnail The">
<IMG the src = " img / jiangxuan_3.jpg "alt =" ">
<the p-> Shanghai direct flights to Sanya 5 days 4 nights free exercise (Spring Festival presale + Family / honeymoon / leisure choice + Luxury Hotels + optional shuttle machine) </ p>
<font Color = "Red"> & Yen; 699 </ font>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
! <- 3. footer - >
<footer class = "Container-Fluid">
<div class = "Row">
<IMG the src = "IMG / footer_service.png" class = "IMG-responsive">
</ div>
<div class = "Row Company" >
Jiang Su Chuanzhi podcast educational Technology Co., Ltd. All Rights Reserved Copyright 2006-2018, All Rights Reserved SU ICP 16,007,882
</ div>
</ footer>
</body>
</html>