Bootstrap Exploration Tour

Bootstrap Exploration Tour

Preparation before exploration

Bootstrap is a framework for quickly building websites. If we need to use this framework, we need to reference it.
There are two ways to reference a framework

Download file import

1. It is introduced into the project css file and js file through the download package on the official website.

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.min.js"></script>

*Bootstrap framework is a framework based on JQuery, so we need to introduce JQuery framework before introducing bootstrap framework
There is no JQuery in the downloaded Bootstrap file, so we need to go to JQuery's official website to download the JQuery file.

2. Introduced through online CDN

Recommend: BootCDN It is an online CDN website with a wide range of servers in China.

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Start exploring Bootstrap

After the introduction, we will formally build the Bootstrap framework. Now let's start our exploration tour~

Simple use of built-in styles

Bootstrap can quickly build web pages, because it completes the style encapsulation of forms, buttons and other components for us. We don't need to write any more styles to design a simple and beautiful style.

<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

We take the button as an example, and we find that we divide the button into seven styles: default, primary preference, success, info information, warning, danger wechat, link connection; four sizes: xs super small size, sm small size, default size, lg large size.

These Bootstrap styles are encapsulated for us. We call them directly. The machine shortens our time. Of course, if we want to give an example to illustrate the painting here, it is impossible, because most of the examples are similar and the number of words in Bootstrap is as high as 1000 +, so we need more practice to accumulate.

grid system

If Bootstrap is just a simple style package, its existence is not very significant. The application of Bootstrap focuses on grid system.

We all know that when writing page layout, using < Table > table can quickly align elements, but < Table > table and its increase the difficulty of code maintainability. In order to solve this problem, we have the concept of grid system.

Grid system is to divide each row into 12 grids, set the number of grids occupied by each element, and quickly align and layout.

<div class="container">
	<div class="row">
		<div class="col-md-1">1</div>
		<div class="col-md-1">2</div>
		<div class="col-md-1">3</div>
		<div class="col-md-1">4</div>
		<div class="col-md-1">5</div>
		<div class="col-md-1">6</div>
		<div class="col-md-1">7</div>
		<div class="col-md-1">8</div>
		<div class="col-md-1">9</div>
		<div class="col-md-1">10</div>
		<div class="col-md-1">11</div>
		<div class="col-md-1">12</div>
	</div>
	<div class="row">
		<div class="col-md-1">1</div>
		<div class="col-md-2">2</div>
		<div class="col-md-2">3</div>
		<div class="col-md-3">4</div>
		<div class="col-md-4">5</div>
	</div>
</div>


Is col-md-1 super like the use of < Table > tables and cross columns, but we may not understand the meaning of MD.

Class prefix describe
.col-xs- Super small screen
.col-sm- Small screen
.col-md- Medium screen
.col-lg- Large screen

The essence of Bootstrap is also here. We can set the number of grids occupied by the elements under different sizes, which is the response.

<div class="container">
	<div class="row">
		<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">1</div>
		<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">2</div>
		<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">3</div>
		<div class="col-lg-3 col-md-2 col-sm-6 col-xs-12">4</div>
		<div class="col-lg-4 col-md-1 col-sm-6 col-xs-12">5</div>
	</div>
</div>


Column offset (Col MD offset -)

Sometimes we don't want to fill 12 squares or start with the first one.

Every time we create a row (. Row), the next row will take another row;
Each element offsets a certain lattice. Col MD offset -, which starts with the number of lattice offsets. * *

<div class="row">
	<div class="col-md-1">1</div>
</div>
<div class="row">
	<div class="col-md-1 col-md-offset-1">2</div>
</div>
<div class="row">
	<div class="col-md-1 col-md-offset-2">3</div>
</div>


If a row exceeds 12 squares, another row is taken.

<div class="col-md-12">1</div>
<div class="col-md-1">2</div>


Column sorting (Col MD push - / COL MD pull -)

Column sorting, as the name implies, sorts the elements, but I personally think the metaphor here is very abstract; column sorting has col MD push and col MD pull, which is how I understand them.

Col MD push is to push elements through n-Lattice
Col MD pull is to pull elements back to n-Lattice

<div class="row">
	<div class="col-md-8">1</div>
	<div class="col-md-4">2</div>
</div>
<div class="row">
	<div class="col-md-8 col-md-push-4">1</div>
	<div class="col-md-4 col-md-pull-8">2</div>
</div>


As shown above, we push the element 1 of the second row to the fourth grid, and pull the element 2 back to the eighth grid, so that the element can be reversed under the md screen, but not under other screens.

Element visibility (. visible -)

In addition to changing the proportion, offset and sorting of elements in response, it can also be hidden through the display of control elements of different size screens.

<div class="visible-xs">xs Ultra small screen</div>
<div class="visible-sm">sm Small screen</div>
<div class="visible-md">md Middle screen</div>
<div class="visible-lg">lg Big screen</div>

All of the above are static style encapsulation. We just introduced JavaScript files in the process of introducing files. Then, in addition to some responsive layouts, there are some animations. Let's take a look at a simple example.

<nav class="navbar navbar-default">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="">LOGO</a>
		</div>

		<div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
			<ul class="nav navbar-nav">
				<li><a href="">home page</a></li>
				<li><a href="">Sign in</a></li>
				<li><a href="">register</a></li>
			</ul>
		</div>
	</div>
</nav>


This is the charm of Bootstrap. Do more with the least code. Of course, there are other parts in js department. Because JQuery is involved, we will write here for the moment and continue to share the js part of Bootstrap later.

Published 24 original articles, won praise 17, visited 1315
Private letter follow

Tags: JQuery Javascript

Posted on Mon, 13 Jan 2020 08:29:17 -0500 by hinchcliffe