Bootstrap (2) of the H5 framework, h5bootstrap

Bootstrap (2) of the H5 framework, h5bootstrap

Suddenly I don't know what to write, and my mind is out of water. It may be because I am going out to waste some time tonight. Haha ~~~ Remind everyone to go home on Christmas Eve in advance. There are so many eggs generated on Christmas Day .... Continue

In the previous article, we had a rough idea about bootstrap. Next we will start to learn about the things in it.

Browser support

The old browser may not be well supported.

Bootstrap supports Internet Explorer 8 and later IE browsers

CSS source code Research

Didn't we introduce the following files in the head?

<! -- New Bootstrap core CSS file --> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <! -- Optional Bootstrap topic file (generally not introduced) --> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <! -- JQuery file. Be sure to introduce it before bootstrap. min. js --> <script src = "http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"> </script> <! -- The latest Bootstrap core JavaScript file --> <script src = "http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"> </script>

OK, look at the core, this from bootstrap.min.css, this is compressed, it is best to see if there is no compressed version: http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css

I'm talking about using a non-compressed version of CSS.

Before line 1, there were basically some things of label formatting and initialization. To make some students better understand them, I would like to outline some special things.

First

input[type="number"]

CSS attribute selector may be unfamiliar to beginners or those who have never written it. This attribute is used to style rendering the <input type = "number"/> label, I think you will know how to write the rest.

Second

display: block;   

You may say, "I know the conversion element features ~~~", Haha, that's right, but you know what will happen after the specific transfer, or why, what is the corresponding?

Well, let me give you a general idea (friends don't need to read it). In HTML, there are "block elements" and "intra-row elements". Their default main features are as follows:

Block Element: exclusive row. The width and height can be set. The default width is 100% of the parent container.

In-row element: a row is not exclusive. width and height cannot be set.

After knowing this, add a display: block to the element, which is to convert the element into a block element so that the element can be set in width and height. OK. Now I know how to use this.

Third

color: #000 !important;

Well, you must know the previous part! What is important ??? Optimization level, that is, when it is applied to an element, as long as it is supported, the browser will give priority to color: #000 ;, regardless of whether the same attribute is overwritten, the overwritten attribute value is not added! Important ).

Fourth

@font-face

Row 3: This attribute is included in CSS3. The main function is to embed custom web fonts into your webpage, in this way, you are not afraid that your webpage will not display any fonts that are not available on other computers. In other words, this is called a font icon. Many systems have a font icon, which is not only available in bootstrap. The advantage is that it can be used like a font to change the color, set the general information. Okay. How can I use it?

Haha, you don't need to worry about it. It's already done ~~~ See the following:

@font-face {  font-family: 'Glyphicons Halflings';  src: url('../fonts/glyphicons-halflings-regular.eot');  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') …}

Look, CSS introduces several files. In the fonts file in the upper-level directory, open the file and check whether it is the same. Of course you don't have to worry about it. If you know what is going on, OK.

More font icons, see this: http://noob.d8jd.com/noob/5/117.html

For example:

<span class="glyphicon glyphicon-refresh"></span>

A refreshed font icon is displayed.

The rows from 273 to 885 are all css attributes related to fonts.

Fifth

@media

It is important to make self-adaptation. Let's first look at what it is.

The font is the meaning of the media. In fact, the principle is to define different styles for different media (devices ).

 

@ Media (min-width: 768px) {//> = 768 devices} @ media (min-width: 992px) {//> = 992 devices} @ media (min-width: 1200) {//> = 1200 devices} pay attention to the following order, if you write @ media (min-width: 768px) below, it is a tragedy. @ media (min-width: 1200) {//> = 1200 devices} @ media (min-width: 992px) {//> = 992 devices} @ media (min-width: 768px) {//> = 768 of devices} because if it is 1440, because 1440> 768, your 1200 will be invalid. So when we use min-width, we can put the smaller values above and below them. Similarly, if we use max-width, the larger values are above, small device @ media (max-width: 1199) {// <= 1199} @ media (max-width: 991px) {// <= 991 devices} @ media (max-width: 767px) {// <= 768 devices}

Declare again:If min-width is set, the value is smaller than above, the value is greater than below, and the value is greater than the value of max-width.

Now that we know this, can we use it together. Specify a range. See the following:

@media screen and (min-width: 960px) and (max-width: 1199px) { …}@media screen and (min-width: 768px) and (max-width: 959px) {…}….

I won't talk about it. I believe you can understand it.

There seems to be nothing else. We will go back and analyze the corresponding

~~~ It's a holiday, and I really want to play it. Today, over ~~~