Bootstrap3 document for Reference

Alas, I saw 2 yesterday. I knew I could only watch 3. Although the whole thing remains the same, there are still a lot of minor changes. The product needs to be upgraded, but it is annoying to change the style name, usage, and function, those who get used to 2 have to clear their previous memories and then look at 3 again. I learned a lot from the hard work. Who wants to use other tools ~~~~~~

In Bootstrap 2, we added a mobile device-friendly style to some key parts of the framework. In Bootstrap 3, we have rewritten the entire framework so that it is mobile device friendly at the beginning. This time, instead of simply adding some optional styles for mobile devices, it is directly integrated into the kernel of the framework. That is to say, bootstrap takes precedence over mobile devices. The style for mobile devices is integrated into every corner of the framework, rather than adding an additional file.

Bootstrap caters to the development of mobile Internet in full swing,

 
<MetaName ="Viewport"Content ="Width = device-width, initial-scale = 1">
 

A simple sentence allows your webpage to be displayed based on the actual screen size. To adapt, you must modify the frame to adapt only the span * style of the screen. In this way, col-xs-* col-Sm-* col-MD-* col-LG-* Replaces columns. For more information, see http://v3.bootcss.com/css/. this sample allows you to select which type of product you want to use. When span is replaced, the offset is also changed.Col-Sm-offset. Here, a push pull is added.. Col-MD-push -*And. Col-MD-pull -*Class can easily change the column sequence.

There are not many other changes.

Another is the use of small icons that I like very much.

 
<SpanClass ="Glyphicon-search"Aria-hidden ="True"> </Span>
 

 
You can also use simple labels without having to separate them.
Usage notes
 

For performance considerations, all icons require a base class and a class corresponding to each icon. Put the following code in any place for normal use. Note: To set correct inner padding, you must add a space between the icon and the text.

Do not mix with other components

The icon class cannot be used together with other components. They cannot exist together with other classes on the same element. Create a nested<Span>Label, and apply the icon class to this<Span>Label.

It takes effect only for elements with blank content

The icon class can only be applied to elements that do not contain any text content or child elements.

Change the icon Font File Location

Bootstrap assumes that all the icon font files are located in../Fonts/Directory, relative to the pre-compiled CSS file directory. If you have modified the position of the icon font file, you need to update the CSS file in any of the following ways:

• Modify in the less source code file@ Icon-font-PathAnd/or@ Icon-font-nameVariable.
• Use the relative URL options provided by the less compiler.
• ModifyURL ()Address.

Select a method based on your own situation.

Icon accessibility

Modern auxiliary technologies can recognize and read the content generated by CSS and specific Unicode characters. To prevent the screen reader from capturing unintentional and potentially confusing output content (especially when icons are purely for decorative purposes), we setAria-hidden = "true"Attribute.

If you use icons to express some meanings (not just for decoration), make sure that the meaning you want to express can be identified by the secondary device. For example, include additional content and. Sr-onlyClass to display the hidden effect visually.

If the component you created does not contain any text content (for example,<Button>Contains only one icon), you should provide other content to express the intent of the control, so that users who use the auxiliary device can know its role. In this case, you can addAria-label.

 

 

 

I think the bootstrap team should list the differences to help programmers upgrade ~~~

 

Bootstrap3 document for Reference