preamble
Hello everyone! I'm Nine Songs and today I'm going to be sharing aboutBootstrapThe introductory, first of all, the old rules first on themind map。
Tip: Below is the body of this post, with the following examples for reference
I. Bootstrap
There are three W's when it comes to learning a new technology: What, Why, and Where.
-What is Bootstrap?
Bootstrap is an AmericanTwitterThe company's designers, Mark Otto andJacob Thornton collaboration is based on HTML, CSS,JavaScript The development of a simple, intuitive and robustforward part of sth.Bootstrap provides elegant HTML and CSS specifications , it is written by the dynamic CSS language Less.
Bootstrap contains
- fabric:Bootstrap provides a basic structure with a grid system, link styles, and backgrounds. This will be explained in detail in the Bootstrap Basic Structure section.
- CSSBootstrap comes with the following features: global CSS settings, defining basic HTML element styles, extensible classes, and an advanced grid system. This will be explained in detail in the Bootstrap CSS section.
- subassemblies:Bootstrap includes a dozen reusable components for creating images, dropdown menus, navigation, warning boxes, popup boxes, and more. This will be explained in detail in the Layout Components section.
- JavaScript PluginBootstrap includes more than a dozen custom jQuery plugins. You can include all of them directly, or you can include them one by one. This will be explained in detail in the Bootstrap plug-ins section.
- customizableYou can customize Bootstrap components, LESS variables and jQuery plugins to get your own version.
-Why learn Bootstrap
1. Save time
Bootstrap library contains a lot of ready-made code snippets, these codes can add more vitality to your website. web developers do not have to spend time and effort coding, just find the right code, inserted in the right place.
Bootstrap, developers can easily manipulate the window warning box , tooltip boxes , scrollbars , buttons , etc. Bootstrap is the most prominent , it allows you to not have to bother to write scripts .
2. Customization
One of the important aspects of Bootstrap is that you can take it for yourself. You can keep the parts of the framework that you need and discard the ones that you don't. Bootstrap as a whole allows you to tailor the projects you develop to your needs.
3. Detailed description of the document, easier to get started
Bootstrap's documentation is quite impressive, and Bootstrap's documentation has helped us a lot in getting started. We can find all the information we need through the documentation.
4. Responsive design
Responsive Web design (Responsive Web design) is the concept of: centralized creation of the page image layout size, can be intelligently based on user behavior and the use of the device environment (system platform, screen size, screen orientation, etc.) for the corresponding layout, regardless of whether the user is using a laptop or iPad, our page should be able to automatically switch the resolution, image size and related script functions to adapt to different devices. This way, we do not have to be busy adapting to various types of terminals.
5. Browser Support
All types of browsers support Bootstrap without incompatibility issues.
6. Mobile devices are prioritized
The most difficult thing to adapt is the mobile device, when the mobile device has been solved, the other can not also be solved?
-What is Bootstrap used for?
Bootstrap is mostly used for blogs, enterprise portal pages and so on. After all, Twitter is a blogger.
It is not suitable for pages with complex categorization: e.g., Sotheby's.
II. Steps for use
1. Download Bootstrap
Website: /
Download should be all right, under the new version of the line, will not be able to read the document, simple and easy to get started.
2. Introduction of libraries
The code is as follows:
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-
<style>
-
.aa{
-
color: white;
-
background-color: #007BFF;
-
border: 0px;
-
width: 50px;
-
height: 30px;
-
border-radius: 3px;
-
}
-
</style>
-
<link rel="stylesheet" type="text/css" href="css/"/>
-
</head>
-
<body>
-
-
<div class="container">
-
<button class="aa">consult (a document etc)</button>
-
<hr color="red" />
-
<button class="btn btn-outline-primary">look for sth.</button>
-
</div>
-
-
<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>
-
<script src="js/" type="text/javascript" charset="utf-8"></script>
-
-
</body>
-
</html>
III. Cases
1. Query the original implementation of the comparison Bootstrap way to achieve
The original code is as follows:
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
-
<style>
-
.aa{
-
color: white;
-
background-color: #007BFF;
-
border: 0px;
-
width: 50px;
-
height: 30px;
-
border-radius: 3px;
-
}
-
</style>
-
<!-- <link rel="stylesheet" type="text/css" href="css/"/> -->
-
</head>
-
<body>
-
-
<div class="container">
-
<button class="aa">consult (a document etc)</button>
-
<hr color="red" />
-
<button class="btn btn-outline-primary">look for sth.</button>
-
</div>
-
-
<!-- <script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>
-
<script src="js/" type="text/javascript" charset="utf-8"></script>
-
-->
-
</body>
-
</html>
The original effect is as follows:
Bootstrap way code is as follows:
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
-
<style>
-
.aa{
-
color: white;
-
background-color: #007BFF;
-
border: 0px;
-
width: 50px;
-
height: 30px;
-
border-radius: 3px;
-
}
-
</style>
-
<link rel="stylesheet" type="text/css" href="css/"/>
-
</head>
-
<body>
-
-
<div class="container">
-
<button class="aa">consult (a document etc)</button>
-
<hr color="red" />
-
<button class="btn btn-outline-primary">look for sth.</button>
-
</div>
-
-
<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>
-
<script src="js/" type="text/javascript" charset="utf-8"></script>
-
</body>
-
</html>
Bootstrap implementation of the way the effect is as follows:
If the class of the big div here is not container, the effect is as follows:
2. Bootstrap page in the mobile browser display effect
We want to add the meta_viewport to the head if we want to adapt it to mobile, let's see the result. Let's see the effect.
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-
<style>
-
.aa{
-
color: white;
-
background-color: #007BFF;
-
border: 0px;
-
width: 50px;
-
height: 30px;
-
border-radius: 3px;
-
}
-
</style><link rel="stylesheet" type="text/css" href="css/"/>
-
</head>
-
<body>
-
-
<div class="container">
-
<button class="aa">consult (a document etc)</button>
-
<hr color="red" />
-
<button class="btn btn-outline-primary">look for sth.</button>
-
</div>
-
-
<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>
-
<script src="js/" type="text/javascript" charset="utf-8"></script>
-
</body>
-
</html>
The effect is as follows:
The button pointed to by the arrow is to convert your computer's browser to mobile.
3. Home navigation & search area original realization
The code is as follows:
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Case 3</title>
-
<style type="text/css">
-
.aa{
-
height: 50px;
-
background-color: #F8F9FA;
-
line-height: 50px;
-
}
-
.bb{
-
float: left;
-
margin-left: 50px;
-
}
-
.cc{
-
float: right;
-
margin-right: 50px;
-
}
-
.cc a{
-
margin-left: 10px;
-
}
-
.ss{
-
background-color: #dcdcdc;
-
height: 100px;
-
margin: 20px 50px 0px 50px;
-
text-align: center;
-
line-height: 100px;
-
}
-
.ss button{
-
color: white;
-
background-color: #007BFF;
-
border: 0px;
-
width: 50px;
-
height: 30px;
-
border-radius: 3px;
-
}
-
.ss input{
-
border: 0px;
-
width: 200px;
-
height: 25px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="aa">
-
<div class="bb">
-
Hello and welcome to the Hogwarts Online Bookstore!
-
</div>
-
<div class="cc">
-
<a>home page (of a website)</a>
-
<a>log in</a>
-
<a>enrollment</a>
-
<a>My Cart</a>
-
</div>
-
</div>
-
<div class="ss">
-
<input type="text"/>
-
<button>consult (a document etc)</button>
-
</div>
-
</body>
-
</html>
The effect is as follows:
4. Home navigation & search area Bootstrap implementation of the framework for building the home page of the bookstore
The code is as follows:
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title></title>
-
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-
<link rel="stylesheet" type="text/css" href="css/"/>
-
<style>
-
.navbar-collapse{
-
flex-grow: 0;/* 1, means the brake will occupy the remaining space of the parent container 0, means it will not occupy */
-
}
-
.ss{
-
height: 100px;
-
background-color: #dcdcdc;
-
margin-top: 20px;
-
-
}
-
.form-group{
-
width: 300px;
-
margin-left: auto;
-
margin-right: auto;
-
margin-top: 31px;
-
}
-
</style>
-
</head>
-
<body>
-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
-
<div class="container">
-
<a class="navbar-brand" href="#">Hello and welcome to the Hogwarts Online Bookstore!</a>
-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
-
aria-expanded="false" aria-label="Toggle navigation">
-
<span class="navbar-toggler-icon"></span>
-
</button>
-
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-
<div class="navbar-nav">
-
<a class="nav-item nav-link active" href="#">home page (of a website)<span class="sr-only">(current)</span></a>
-
<a class="nav-item nav-link" href="#">make landfall (of typhoon etc)</a>
-
<a class="nav-item nav-link" href="#">enrollment</a>
-
<a class="nav-item nav-link " href="#">My Cart</a>
-
</div>
-
</div>
-
</div>
-
</nav>
-
-
<! -- Grid system to realize part of the frame of the home page -- >!
-
<div class="container">
-
<! -- first line -->
-
<div class="row ss">
-
<div class="col">
-
<form>
-
<div class="form-group">
-
<div class="input-group mb-3">
-
<input type="text" class="form-control" placeholder="Keywords for books" aria-label="Recipient's username"
-
aria-describedby="basic-addon2">
-
<div class="input-group-append">
-
<button class="btn btn-primary" type="button">consult (a document etc)</button>
-
</div>
-
</div>
-
</div>
-
</form>
-
</div>
-
</div>
-
-
<div class="row">
-
<! -- second line -->
-
<div class="col-3" style="background-color: pink;">
-
Left 3 - Classification of books
-
</div>
-
-
<div class="col-9" style="background-color: skyblue; ">
-
<! -- Right 9-Rotating Charts & New Books on the Shelf & Popular Books -- >!
-
<div class="row">
-
<div class="col">
-
Right 9 - First Row Rotating Chart
-
</div>
-
</div>
-
<div class="row">
-
<! -- New books on the shelves in Right 9 -- >!
-
<div class="col">
-
①New books on the shelves
-
</div>
-
<div class="col">
-
②New Books on the Shelf
-
</div>
-
<div class="col">
-
③New books on the shelves
-
</div>
-
<div class="col">
-
④New books on the shelves
-
</div>
-
<div class="col">
-
⑤ New books on the shelves
-
</div>
-
</div>
-
-
<div class="row">
-
<! -- Popular Books in the Right 9 -- >!
-
<div class="col">
-
①Popular Books
-
</div>
-
<div class="col">
-
②Popular Books
-
</div>
-
<div class="col">
-
③Popular books
-
</div>
-
<div class="col">
-
④Popular Books
-
</div>
-
<div class="col">
-
⑤ Popular Books
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
-
-
<script src="js/jquery-3.3." type="text/javascript" charset="utf-8"></script>
-
<script src="js/" type="text/javascript" charset="utf-8"></script>
-
</body>
-
</html>
The effect is as follows:
summarize
The above is the content of today's talk, this article is only a simple introduction to the use of bootstrap, if there is any error hope to correct. Thank you.