Bootstrap (iii) Of the H5 framework, h5bootstrap

Bootstrap (iii) Of the H5 framework, h5bootstrap

I haven't written it for many days. Continue.

In the previous article <Bootstrap (ii) of the trademanager H5 framework>, CSS has been introduced to the page, and then the page is written.

First, some questions should be addressed first. What do you want to learn about bootstrap? Popular? Fast webpage writing? Or something else? To be honest, if someone who is skilled in writing pages (cool people) won't use any framework to write them. Why are they too bloated, who can write a page to use all its CSS and define all its classes? Therefore, a lot of code is redundant for the page. Fortunately, after the launch, the resource library is introduced. If you have a code streamlining problem, it is estimated that you have to rewrite (overwrite) Something (Note:In fact, I have been working on the background most of the time, and I only know a little about the front-end. I don't want to be a good expert. I have something wrong with it. I am bold enough to mean it and learn it modestly .)

What is adaptive?

I believe this is also your goal. To make an adaptive website, mobile phone (tiny device), tablet (small device), general computer (medium device), large display (large setting) and so on. Currently, the following two methods are generally used:

First: one set of different devices

The first thing that comes to mind is the trouble. There is no way, like some websites (such as malls), the style or content displayed by websites and mobile phones are very different. How can we make a set? OK ?... Think of this, you must have to give in, okay, I will not say much about it.

Type 2: All devices have one set.

You will surely be happy to see this, but not all types of websites are suitable for this kind of website, but the CMS system is doing a lot now.

The thought is adaptive. When writing a CSS container, the width cannot be fixed. What should I do? The percentage.

How do I think there is a lot of nonsense? I have typed so many words... I'm sure I only want to talk about the second case here.

Make an Adaptive Navigation and check the Code directly:

<! DOCTYPE html> 
View the results. Click here.
Note:
The Nav label defines the navigation. role = "navigation" tells the browser that this is a navigation container. Then define a container-fluid in it, nominal as not fixed (will change) container, 1411 lines of code:
.container-fluid {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}
Only the padding is defined. The padding is automatic, indicating that its width is 100% of that of the parent container, which naturally changes with the browser window size.
Zoom out the window to see the effect:

The column icon on the left is displayed after it is reduced to a certain size. Check the key code in line 4022:
@media (min-width: 768px) {  .navbar-toggle {    display: none;  }}
If the width is greater than 768, the image is hidden. Otherwise, the image is displayed.
Click the icon to display the drop-down sub-navigation function, which is of course the js effect.
 
Clarify:Self-adaptation is actually to apply different CSS styles when the browser (device) size is changed, write a large range, write a special one, and then overwrite the previous style, looking at the CSS source code, there are also a large number of hierarchical relationships (such. navbar-nav. open. dropdown-menu), which means that the dropdown-menu class must have an open class in the parent class, and the open class must have navbar-nav in the parent class. This means that many writing methods must follow the requirements.
 
In the above case, let's take a look at its application styles. It looks dizzy. Haha, this is the framework. taking different devices into account, there will be more natural code.
 
Did anyone think of the trouble? I wrote it on my own, right? Experts wrote it on their own ~~~, However, the benefits provided by the Framework at that time are only reflected in the speed and the speed of writing a webpage.
 
When I look back, I will write an adaptive CSS from 0. I will write only a part to let some kids shoes know what is going on. OK ~~
 
Next case (fixed to the top navigation bar ):
<! DOCTYPE html> 
Query results: click here
Fixed function key code 3956 lines:
.navbar-fixed-top,.navbar-fixed-bottom {  position: fixed;  right: 0;  left: 0;  z-index: 1030;}
Position: fixed; // absolute position relative to the browser
If you are not familiar with positioning, click here.
 
Bootstrap framework navigation bar to write this point, want to see more detailed navigation bar effect, please see: http://noob.d8jd.com/noob/5/123.html
 
In the navigation bar, I will introduce how to write the subject section.
 
If you have any questions, leave a message and learn it with humility ~~~