A responsive pc-side project, enterprise website test9

A responsive pc-side project, enterprise website test9

 

 

I. Introduction of the bootstrap framework

 

The bootstrap raster system has been suffering yesterday.

Why?

I originally wanted to learn the grid layout while using code words. But failed. At this moment, my mind is lost.

In the afternoon, I checked the official bootstrap website and asked my question: How can I use the bootstrap framework?

Problem 1: The bootstrap that I introduced externally can indeed restore the style. But it is very troublesome to use code words. Webstrom cannot prompt code.

Here, I downloaded bootstrap-3.3.7-dist.zip on the Chinese network of bootstrap!

Three stages are also introduced on the html page.

<! -- New Bootstrap core CSS file -->
<Link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<! -- JQuery file. Be sure to introduce it before bootstrap. min. js -->
<Script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script>
<! -- The latest Bootstrap core JavaScript file -->
<Script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

But, my code is like this.

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>

I made a mistake here because the accessories are not complete yet. I am so blind, the page is ineffective. Therefore, it takes three minutes to locate the problem.

How can I mine all the way! ~~~ X_x!

After finding the problem, I went to the workshop

Enter the following code on </body>:

<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>

All right. The configuration is complete. If you see this article, congratulations, you don't have to step on it! In fact, I have been in Cambodia for the past two days.

Summary: if you follow the style layout I mentioned, there will be the following structure:

1. Three bootstrap files (css, fonts, and js) are included in your project.

2. The

3. Before </body>, there is Code 2 that introduces js.

 

It took so many days to learn how much time to use bootstrap? What is the difference between html and css?

 

Ii. bootstrap raster System

In fact,

The container class of twitter bootstrap has the advantage that it is responsive and will calculate the best width based on the current screen width for use.

Responsive! This is the most popular layout currently! What's worse, do you think the big eggplant class will be dumb than you, or boring than you to let you learn?

I am awake immediately.

The container class is equivalent to creating a div box with a static width and a magin value of auto in the center.

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

The row class is margin with a negative horizontal direction of 15px;

At that time I directly copy the container "row" cod-lg-4 such structure layout it! Therefore, the layout positioning is out of line with my original ideas!

So at noon, when I asked questions about how to eliminate the left and right sides of the blank, a senior asked me to make a-15px question. Now I understand IT !.

The theory of the raster system is as follows:

The outermost container contains the 15px padding of left and right.

The forward row contains the-15px margin of left and right.

15 PX padding with left, right in a proper col-lg-12

In this structure, I want to ask: Are you sure you are not the heir to the Chinese mojia?

 

There are some silly things happening. I originally knew that there is. container-fluid, which is a full-width container and uses the whole width. However, the. iner is used for a long time, and the horizontal internal and external margins are adjusted. Stupid-crying.

After this morning's creation !, I understand that iner Nesting is not recommended on the Internet, but this structure can appear.

1/container> row> is the code we usually deploy.

2/container> row> col-lg-12

3/container-fluid> container> row> col-lg-12

I do not know whether the audience think of me such stupid cry, at first thought that only according to the container> row> col-lg-12 structure layout, is regarded as a grid system. 8_8 ~ Sad!

 

Back to my original question, what is the difference with native html + css layout?

Let's talk to an instance.

Put my footer settings in test8-1.htmland test9-1.html to explain.

The overall structure is as follows: Native html + css on the left and grid system on the right

Let's talk about the setting of the bottom f-row-2 first!

 

In Native h + c, the architecture of the bottom copyright information is

F-row-2> pct80 tr> Contents

Here, I need to give a base style pct80 {with: 80%} to complete my width separation principle. The content section is only 80% wide. You should add an auto class to show me the div center.

The architecture of the raster system is as follows:

Container-fluid> f-row-2 row> col-lg-12 col-md-12 col-xs-12> tr> content

I still use the f-row-2 to determine the space height of the content display, but the width is set by the grid system row and col-lg-12.

The style is not changed at all.

 

After reading the example above, if you haven't figured it out, it doesn't matter. There are still the following chestnuts.

On the left I am using a parent box <div class = "pct80 auto df-jcsb"> to contain three sub boxes (f-cess-1, f-cess-2, f-cess-3.

Use the css style df-jcsb of the parent box to align the two ends without line breaks (flex knowledge)

On the right side, I use

 

<div class="container">
   <div id="f-row-1" class="row">
       <div class="col-lg-4 col-md-4 col-xs-12">

Place every f-cess-1, f-cess-2, f-cess-3 I should come back and layout, using position positioning to achieve.

 

And I want to set the width and margin for each sub-box on the left. On the right side I manipulate it directly through a col-lg-4.

Maybe I am not very clear about it! You can use my github, download project test9 and test8 for comparison.

Attached address: https://github.com/hewasdrunk/

To sum up, I want to explain: In the layout of native html + css, We can freely set the div structure and width to achieve our layout. The raster system is a method of its own, let us change the form of col-lg-12 to achieve width. Rows are implemented through row.

-- Cainiao