Getting Started with Front End 24 - Responsive Layout (BootStrap) Statement Body - Responsive Layout (BootStrap)
statement
This is excerpted from the following two sources.
Thanks to the big boys for sharing.
Full Text - Responsive Layout (BootStrap)
This time I want to talk about a front-end development framework: BootStrap
There are currently 4 versions of BootStrap, each with a corresponding official tutorial, so let's take a look at the taglines in the different versions.
Simple, intuitive, and robust front-end development framework that makes web development fast and easy. --- BootStrap version 2.x.x
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive layout, mobile-first web projects. --- BootStrap version 3.x.x
Bootstrap is the world's most popular front-end component library for developing responsive layout, mobile-first WEB projects. Bootstrap is an open source toolset for HTML, CSS and JS development. Quickly prototype your idea or build an entire app with our Sass variables and extensive mixin, responsive grid system, scalable pre-built components, and powerful jQuery-based plugin system. --- BootStrap version 4.x.x
So, what is a responsive layout?
Commonly understood, it is the ability to have different layout effects on different screen sizes, for example, presenting a multi-column layout on a large size screen, not so much on a small size screen, and maybe just a one-column layout.
Then, when the screen size changes, what layout should be rendered on different screen sizes is usually achieved through the media query @Media, but it requires more work to handle if you write it in CSS yourself.
So， You can also choose some popular frames， Let it help with these responsive layouts， just as BootStrap， however BootStrap Features are not only responsive， It also has a lot of pre-made components built in and more， In conclusion. very powerful， I haven't used it yet, though.。
use
Then let's learn how to use， The first step is definitely to install， I'll go straight to the latest version 4.x.x The series came as a start up， Didn't bother with the old version， We'll talk about it when we get a chance.。
will BootStrap Introduced into the project use There are two ways：
- Direct access to online resources
- Download relevant resources locally use
use Online Resources
The first way is the easiest, just declare the source of the css and js files directly in the HTML document, e.g.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>use BootStrap， upper HTML Documentation templates are a must， The ones with comments are in all use finish BootStrap The page that needs to be introduced in the， One thing to note is that， thanks to BootStrap Some components rely on jQuery harmony Popper， So it is necessary to introduce these two js， And the order is jQuery first，Popper back， Finally, reintroduction of BootStrap offered bootstrap.min.js。
This is the first way, and the least labor intensive.
Download resources to local use
This way is a bit more of a toss-up, with the advantage that the resource files can all be on your own server and you don't have to rely on others. There are also two ways to download the resources locally, one is to manually download them from the official website at the following three addresses.
The second is to use some tool to download it, such as the npm command for node.js. Open a terminal and go to the root directory of the project at
- npm init -y
- npm install bootstrap
- npm install jquery
- npm install popper.js --save
If an error is reported during the execution of the command, search for the solution yourself, I am a one-time success, no problem, after all the download, the project structure is as follows, node_modules folder will have downloaded resources:.
The package.json configuration entry is as follows.
This is the version I downloaded and used.
Well, whether you go to download manually, or then npm, you will eventually need to put the downloaded resources into the project, so what to do with all the downloaded stuff, and what is useful?
The HTML document in the first approach above can be borrowed, and the total number of documents needed is actually four.
- bootstrap.min.css
- jquery.slim.min.js
- popper.min.js
- bootstrap.min.js
Find where each of the four documents are, mine are under these paths.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>The official tutorial says， This is above. use BootStrap of HTML templates， And of course there was an explanation， Here's a little more on that：
<!DOCTYPE html>
This is the declaration of the HTML document for h5, which may have some strange styling if this is not added.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
This line of code means that the web page can automatically adapt to the screen of the current mobile device.
So, in addition to introducing the required resource files in the HTML document, don't forget to add the above two processes to use BootStrap.
Official example
BootStrap 4.x.x version, there is no official Chinese tutorial, 3.x.x Chinese tutorial is very complete. But the 4.x.x version differs quite a bit from the 3.x.x version. First of all, 4.x.x chooses Sass as its preprocessor, flex for its grid layout system, and so on.
in any case，BootStrap Essentially, it's a framework， Encapsulates a range of property styles、 Components for Developers use， Developers just need to understand what property styles are available with、 What components are available for、 How's that working out?、 How it works is fine.， As for these， It's just a step-by-step process in actual development， I'm slowly building up as I write and look up documentation。
Therefore, this article will not go to the list of individual component effects, property style effects, but also one by one to explain how to use.
What follows is the thought that it's enough to be able to read the code of one of the official example projects.
This official example was chosen.Album
Read its HTML code step by step.
- The first step is the template for the HTML, as described in the previous subsection, the one that requires the H5 declaration, the meta declaration, and the introduction of the four resource files.
- second step， come and see <body> inner <header> code：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<!--header part-->
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<strong>Album</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>Look at the results.
In the current code， We didn't write it at all. CSS， only in HTML documentation， Added <header> Tag Content， You'll be able to achieve this page effect，So， indeed，BootStrap There are a bunch of property styles already wrapped up， We can simply pass the label on the class Applying these property styles is all it takes。
illustrate use of class enough， Basically. BootStrap encapsulated， I'm not trying to figure out exactly what all the ones I use do.， Just trying to get a general idea.， follow-up on use Let's take our time in learning。
For this <header> effects， I'm trying to sort out two main points：
- How is unfolding and collapsing achieved?
- How are those lists implemented when expanded?
Go back and look at the motion picture above，<header> part is used as a navigation bar， And there are two states， Folding and unfolding， So the two states correspond to two <div>，<header> There are exactly two in the son tag <div>；
Look at the first one. <div> of class：collapse bg-dark，collapse It means folded.， So the first <div> It's the container that was folded in the first place， And control this <div> fold， that is BootStrap offered collapse It's working.；
The second at the same level <div> of class：navbar navbar-dark bg-dark box-shadow， both <div> Both have the same bg-dark， So this is actually used to set the background， Because when unfolded， indeed <header> The area is made up of two <div> put together， It just happens to be the same background color.， You can't see it.。
So， After page rendering， There's actually a <div> quilt collapse It's folded up.， At this point the page only presents the second <div> It's just content.， this one <div> The style of the height etc. of the navbar、navbar-dark、bg-dark These decisions。
or so， After clicking the button， the first <div> Why did it get unfolded?？
Look at that button.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button><button> sub-tags of <span> The one in the navbar-toggler-icon It's the button. icon， And the reason why you can expand the first one when you click on it <div> It's the other properties that control。
firstly， You need to add to this current button navbar-toggler of class， Then it needs to be passed data-target Indicate the area of controlled deployment， That's why the first <div> There will be a id properties， It's what's used to give this button control over it。
So， Sort it out.， By giving <div> increase collapse of class You can make this area collapse and hide， Then set it up with a id； Then add to the button that controls this collapsed area data-toggle harmony data-target properties， pass (a bill or inspection) id to control the folding and unfolding of the specified area。
As for the other classes, there are various style effects.
So, what does it mean when the list control in the expanded area has classes such as row, col-sm-8, etc.?
First, container to set the size of the area, row to set the container as flex layout, and flex layout, a row will be divided into 12 columns, see a diagram.
So col-sm-8 Indicates when the display area >= 576px time， The control occupies 8 columns，So， Such as appears in the same control：col-sm-8 col-md-7 It's actually responsive layout processing that renders different sizes when different display areas are large.
And py-4 is for pading-top, -4 means different size.
offset indicates how many columns need to be left blank in a row of 12 columns.
In conclusion. The official tutorial has a description of the Grid system Did a detailed introduction, though it's in English, so take your time and chew on it.
It is only by understanding the Grid presented in this article that you can understand how to write it to achieve a responsive effect.
Let's look at one more effect of the navigation bar, and I'll break it down again.
As the display area gets progressively smaller, the layout changes from one line to two lines, which is the responsive layout, to explain why it behaves this way.
Look at the codes for these two areas.
<div class="col-sm-8 col-md-7 py-4"> ... </div> <div class="col-sm-4 offset-md-1 py-4"> ... </div>
It says so，BootStrap In Grid Divide each row into 12 columns， So when the display area size is in md range， namely >= 768px case， the first <div> of col-md-7 take effect， It occupies 7 The width of the column， The second one <div> of offset-md-1 harmony col-sm-4 are in effect， So it's empty in front of it 1 The width of the column， Then it occupies 4 The width of the column， That adds up to just right 12 columns， So in >= 768 time， A row can put both down <div>。
But when the display area gradually shrinks， When entering sm range， namely >= 576px time， this time， the first <div> of col-sm-8 take effect， So it occupies 8 columns， And the second one <div> Still offset-md-1 harmony col-sm-4 take effect， So this time adds up to a total 13 columns， more than that 12 columns， There are not enough of these two in one line <div> finish， according to flex elastic layout， The excess is now automatically wrapped。
The above, is my understanding of Grid, may be wrong, if it is wrong, wait for the subsequent use of familiarity and then come back to change, when you look at the big guys, just as a reference to look at it.
Analysis to this point, probably clear Grid and some use of the navigation bar, but also generally clear BootStrap's responsive principle seems to be based on its grid system, by setting for different controls such as col-(sm/md/ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) to achieve in different display areas, different layout effects, to achieve a responsive layout.
So, the rest of the code I don't want to read, my head is a bit confused, the only thing I feel about BootStrap is that it's so expensive to learn, it offers too many things, encapsulates too many styles, controls, instead I don't know where to look.
Perhaps it's not necessary to read it in the first place. Learning BootStrap should be a matter of checking the documentation when you need it, and then gradually, slowly building up your familiarity with BootStrap, rather than looking at the documentation in detail at the beginning.
Recommended>>
1、Oracle Database Learning Certification for People
2、How to understand the multiplexing function of STM32 microcontroller pins
3、All members of the Big Data Laid Over Pit Happy Dragon Boat Festival 2018
4、Action List 4 Use part of the list
5、Huayang to bring intelligence to the end with several exhibits at Beijing Auto Show