Bootstrap charisma Getting Started learning notes

Bootstrap, from Twitter, is currently the most Popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster. It was developed by Twitter's designer Mark Otto and Jacob Thornton, and is a css/html framework. and Charisma is a full-featured, free, member-quality Responsive HTML5 Administrator interface template, based on "Bootstrap", has 9 sets of different theme color content, can meet your different needs!

This article mainly talk about the simple application of charisma. First, the official website. I have made a certain simplification of the official website. Download here. Some things do not belong to charisma, for convenience, I put it in a directory. Next is my condensed inside except the skin CSS, all other CSS and JS need to reference. In addition, I made some changes to the skin CSS, specifically modified to, at the end of each CSS added several classes, such as setting the background color, border and so on.

Note: This framework is incompatible with IE6 (the official does not intend to support), in the IE8, 9 shows a small number of problems, Ie-edge with chrome, FF, etc. can achieve the best display results. Use as appropriate.

In addition, the difference between responsive programming and non-responsive programming is simple. The response means that the position of the element is dynamically adjusted according to the width of the screen, and is commonly used to accommodate multiple screens and mobile browsers. Non-responsive is a variety of screens to see the same effect (small screen can easily lead to text overflow and other problems). Using responsive programming, responsive programming, and responsive programming, it's important to say three times. Responsive programming in a widescreen browser does not affect the display at all, and the best display in a narrow-screen browser can be achieved. And the two are quite difficult. So, you know.

Go to the chase. First I give a responsive charisma framework code, the page can be directly based on the framework code development.

<! DOCTYPE html>
A simple explanation. The first line. Since Bootstrap is based on HTML5, this line cannot be changed.
Inside the head tag: In addition to the key declarations, custom styles, there are also necessary CSS files. Where the ID is bs_css for the skin, there are 8 similar names of CSS files under the directory. Direct jquery changes the href attribute to make dynamic skin changes. Custom Style The first one is to remove the underscore from the A-label, and the other is required for responsive programming, which is estimated to set the display width.
Since IE8 is not compatible with HTML5 tags, these two JS files need to be introduced in the low version of IE. The last two JS files must be referenced.
The frame is finished, talk about use. The use of direct reference to the official website example, chrome under the review element, want to realize what to directly copy that heap of code, OK.
After reading the example, I'll talk about my changes to the bootstrap skin:
Class= "Bg-normal" This means setting the background color (useful for cascading elements)
Class= "Bg-border" This is used to set the border (when the source frame does not meet the requirements)
class= "Text" This is used to set the foreground color (in addition to the text can also be used to set other)
Class= "Frame" chass= "Framechild" These two are used to design custom tables (such as list tables, which can be implemented with this)
Class= "Border-xxx" This is used to set which border to display (sometimes just want to show a border, you can try this)
The above several CSS support all 8 kinds of skin style (Online said 9 kinds, do not know the last one is what), can be used directly.
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Bootstrap charisma Getting Started learning notes