[Frontend framework Bootstrap 02] layout and navigation

Preface

It's been a few days since the last time. In fact, I have been watching this part more or less during this time, but the effect is not good!

I 've been playing around for a long time. Maybe it's because my husband is really old. learning new things is still not good!

So the old man is about to start shamelessly. I plan to study at, and sometimes everyone will forgive me if I copy the official website.

I recently used bootstrap for layout and navigation. However, the results are not satisfactory. So let's take a look at these two parts first. If they are still confused, then .... I will finish learning again.

Now, let's start learning today.

Raster System

Speaking of the raster system, Let's explain it first, although everyone knows:

The above is not the focus of our attention, so let's look at the implementation of bootstrap. Let's first look at his description:

Basic raster System

I am on the left and on the right

I learned how to be smart. I copied the code, read the results, and then finished. Today I am smart !!! I will never go to the 5000 lines of css code. So let's look at the css on the page...

 {:; } {:;:;:; } {:; } {:; } {:; } {:;:;:; } {:; } {:;:;:; }

This span is float. According to the statement that float should not be used for layout, I will complain a little, but I still accept it first, so it is hard to separate it.

In this way, a row container is required for each row, so let's try two more columns.

I'm on the left, I'm on the right, I'm on the left, I'm on the right

We need to ensure that the sum of "span" in each row is 12, and it supports responsive layout. In fact, the responsive layout is not suitable. Let's see what will happen when the screen gets smaller:

 {    :; :; :; :; :; :; :;   } 

We can see that when the value is less than a certain value, the span width will change to 100%, so we should not provoke him ..

Offset Column

Bootstrap defines many classes and their classes are well-developed. For example, if we want to move the column to the right, we can use. offset *.

. Offset4 can move span to the right of the four columns, so let's try:

Nested column

Nesting is always everywhere. Let's nest it in the first column. nesting also requires the row container:

I'm on the left, I'm on the left, and I'm on the right.

I am so nested that two of the nested results do not play the cards according to the routine... What's going on ??? Well, I don't know, so let's explore it.

His span has a margin-left: 20px attribute, which leads to a line break. I thought it would be handled by myself... So use streaming layout here:

I'm on the left, I'm on the left, and I'm on the right.

The layout is now written here. Let's take a look at the navigation.

Navigation

First, let's take a look at the most basic navigation style:

Homepage my blog contacts us

So a navigation is coming out. We can see that he looks pretty good! So let's take a look at his code. Here I will look at several key points:

{:;}{:;}{:;}{:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;:;}{:;:;:;:;}{:;}{:;:;}

This piece of CSS can basically complete the function, but this kind of navigation is not good, really not good. So let's look at other styles:

We only changed our navigation after changing the class. It's really good. This navigation is quite nice.

Add onenav-stackedAnd can be arranged horizontally. This style is very good for mobile phones.

Navigation Bar

Navigation bar is what we really need. Generally there will be a good color navigation bar. Let's take a look at the bootstrap navigation bar.

Ye xiaochai homepage my blog about us

This navigation bar is pretty nice, that is, it feels a bit dim ....

Brand

<Aclass = "brand" href = "#"> Project name </a> the brand name is displayed here.

PS: His CSS uses a lot of float: left. How do I feel a little uncomfortable!

Delimiter

<Liclass = "divider-vertical"> </li>

Add a separator to this guy:

Conclusion

Today, I simply looked at the navigation and layout. In fact, there are still many things in the two places. For example, there are still many things to do in the current navigation.

Bootstrap provides some very good things. It is our own thing to make good use of them. Noon.