Web Foundation - Bootstrap
Posted by thenewperson on Thu, 23 Jan 2020 03:44:01 +0100
Bootstrap:
1. Concept: A framework for front-end development, Bootstrap, from Twitter, is currently a popular front-end framework.Bootstrap is based on HTML, CSS, JavaScript. It is simple and flexible, making Web development faster.
*Framework: A semi-finished software on which developers can develop and simplify coding.
*Benefits:
1. There are many css styles and js plug-ins defined.These styles and plug-ins can be used directly by our developers to get rich page effects.
2. Responsive layout.
*The same set of pages can be compatible with devices of different resolutions.
2. Quick Start
1. Download Bootstrap
2. Copy these three folders in the project
3. Create html pages and introduce necessary resource files
<!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">
<!--The three meta tags * above must * come first, anything else * must * follow!-->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (All JavaScript plug-ins for Bootstrap depend on jQuery, so they must be placed on the front)-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--Load all the JavaScript plug-ins for Bootstrap.You can also load only a single plug-in as needed.-->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
Hello, World!</h1>
</body>
</html>
Responsive Layout
*The same set of pages can be compatible with devices of different resolutions.
*Implementation: depends on the raster system: divide a row into 12 grids on average, and you can specify elements to occupy several grids
*Step:
1. Define containers.Equivalent to previous table s,
*Container Classification:
1. container: leave blank on both sides
2. container-fluid: each device is 100% wide
2. Define rows.Equivalent to the previous tr style:row
3. Define elements.Specifies the number of cells the element occupies on different devices.Style: col-device Code-Number of grids
*Device code number:
1. xs: ultra small screen mobile phone (<768px):col-xs-12
2. sm: small screen flat panel (> 768px)
3. md: Medium screen desktop display (> 992px)
4. lg: Large screen large desktop display (> 1200px)
*Note:
1. If the number of cells in a line exceeds 12, it exceeds the automatic line wrapping portion.
2. Raster class properties can be upward compatible.Raster classes are suitable for devices with screen widths greater than or equal to the size of the boundary point.
3. If the true device width is less than the minimum value of the device code for setting raster class properties, an element will be contaminated with a whole line.
CSS Styles and JS Plugins
1. Global CSS Styles:
*Button: class="btn btn-default"
*Picture:
* class="img-responsive": Images account for 100% of any size
*Picture Shape
* <img src="..." alt="..." class="img-rounded">: Square
* <img src="..." alt="..." class="img-circle">: circle
* <img src="..." alt="..." class="img-thumbnail">: Photoframe
*Table
* table
* table-bordered
* table-hover
*Form
*Add to form item: class="form-control"
2. Components:
*Navigation bar
*Page breaks
3. Plug-ins:
*Round-robin Map
case
<!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">
<!-- Three of the above meta Label*Must*On top, anything else*Must*Follow it! -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap All JavaScript Plug-ins are dependent jQuery，So it has to be on the front) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Load Bootstrap All JavaScript Plug-in unit.You can also load only a single plug-in as needed. -->
<script 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.Heading-->
<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="Please enter a line name">
<a class="search-btn" href="#">Search</a>
</div>
<div class="col-md-4">
<img src="img/hotel_tel.png" class="img-responsive">
</div>
</div>
<!--Navigation bar-->
<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">
<!-- Define Hamburg Button -->
<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="#">Home page</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>
<!--Carousel Map-->
<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.Main body part-->
<div class="container">
<div class="row jx">
<img src="img/icon_5.jpg">
<span>Black Horse Selection</span>
</div>
<div class="row paddtop">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row jx">
<img src="img/icon_6.jpg">
<span>Domestic Travel</span>
</div>
<div class="row paddtop">
<div class="col-md-4">
<img src="img/guonei_1.jpg">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>Shanghai Direct Fly Sanya 5 days 4 nights(Spring Festival Presale+Parenting/honeymoon/Leisure travel preferred+Luxury hotel choice+Transfer)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3.footer-->
<footer class="container-fluid">
<div class="row">
<img src="img/footer_service.png" class="img-responsive">
</div>
<div class="row company">
//Jiangsu Podcast Educational Technology Co., Ltd Copyright 2006-2018, All Rights Reserved Soviet ICP Preparation 16007882
</div>
</footer>
</body>
</html>
65 original articles published. 1. Visits 2309
Topics:
Spring
JQuery
Javascript
IE
