Since the application of a domain name, a cloud host, began to get personal site.
Discover Bootstrap is very convenient, and important, so began to learn and share about bootstrap technology.
Push an ad
Personal website:http://www.51pansou.com
Bootstrap video Download:Bootstrap video
Bootstrap source code Download:Bootstrap source code
This program is recorded:
Brief introduction
Bootstrap is currently the most Popular front-end development framework, created by Twitter's two former employees Mark Otto and Jacob Thornton in August 2010. It is a set of less-based front-end development libraries (the latest version also contains the Sass source code), which provides a number of common and commonly used CSS and JavaScript collections so developers can get started at any time.
The bootstrap provides the following important features:
From V3.1.0 onwards, Bootstrap's license authorization was changed to the MIT Agreement. MIT is by far the most lenient agreement, and you can safely use it in a variety of business environments.
Entry
Cdn:
?| 1234567891011 | |
Bootstrap framework documents and source code can be downloaded on its official website (www.getbootstrap.com). Click on the link to see 3 download links
Download bootstrap, download the content is compiled can be used directly. Includes uncompressed files and compressed files.
Download the source code, is used to compile the CSS less source code, as well as the various plug-ins JS source code.
Download Sass Project, is used to compile CSS sass source code, as well as the various plug-ins JS source code.
File structure
bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
There is a big difference between the 3.X version and the 2.X series version, which is that the 2.x series version is used to display the icon's small icons. png images are missing and replaced by the 4 types of font files in the fonts directory. We call this way the @font-face version of icon, which comes from the Glyphicons.com website and is licensed for free. The advantage of displaying icons with this technique is that icons can be arbitrarily scaled and color-changed.
The file's CSS, JS folder name is arbitrarily renamed, but cannot rename the Fonts folder, because the source code in the CSS file uses a relative path (.. /fonts/)
Note that all JS plugins for BS are based on jquery, making sure to refer to the appropriate jquery file when using these features.
Basic templates
<!DOCTYPE HTML><HTMLLang= "ZH-CN"> <Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <!--The above 3 meta tags * must be * first, and any other content * must be followed! - <title>Bootstrap 101 Template</title> <!--Bootstrap - <Linkhref= "Css/bootstrap.min.css"rel= "stylesheet"> <!--HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries - <!--WARNING:Respond.js doesn ' t work if you view the page via file:// - <!--[If Lt IE 9]> <script src= "//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" ></script> < Script src= "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js" ></script> <! [EndIf] - </Head> <Body> <H1>Hello, world!</H1> <!--jQuery (necessary for Bootstrap ' s JavaScript plugins) - <Scriptsrc= "//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></Script> <!--include all compiled plugins (below), or include individual files as needed - <Scriptsrc= "Js/bootstrap.min.js"></Script> </Body></HTML>
As can be seen from the template code above, 3.x and 2.x versions, compared to a very big difference, is the following line of code:
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
This is what we mentioned earlier, Bootstrap has fully supported the mobile platform from version 3.0 and will implement mobile first.
The code above means that, by default, the width of the UI layout is consistent with the width of the mobile device, and the scale size is the original size.
CSS Basic syntax
The core of Bootstrap's CSS component is the definition of selectors and their handling at their respective priorities.
How do I determine the precedence of a CSS?
Here we first introduce a mechanism that uses 4 numbers (A,B,C,D) to represent priority combinations.
The first number (a) represents the Style property, with the highest precedence. Since it is generally a class style, this value is typically 0.
The second number (b) is the sum of the number of IDs on the CSS selector, typically 1.
The third number (c) is the sum of the other properties CSS selectors and pseudo-classes that are used on the CSS selector. This includes the class (. btn) and attribute CSS selectors (such as li[id=red]).
The fourth number (d) calculates the element (like table, p, Div, etc.) and pseudo-elements (like first-child, etc.).
Selector Selector
Here is a brief introduction to 2 commonly used:
Sub-selectors:
| Element element | Div p | Select all <p> elements inside the <div> element. | 1 |
| element>element | Div>p | Selects all <p> elements of the parent element for the <div> element. |
Brother Selector:
| element+element | Div+p | Select all <p> elements immediately after the <div> element. |
| element1~element2 | P~ul | Select each <ul> element that has a <p> element in front of it. |
Extended:
Div,p indicates that multiple selectors are selected at the same time
Pseudo-classes are used to add special effects to certain selectors. such as A:hover A:link
Media Enquiry
Media query is the core element of responsive design, and its function is very powerful.
Bootstrap mainly uses Min-width, max-width, and and syntax to set different CSS styles at different resolutions.
?| 123456789101112 | |
JS Basic syntax
|| With && 2 operators
|| Indicates that if the first element can be converted to true, the value of the first element is returned, otherwise the value of the second element is queried
&& Conversely, if the first element can be converted to false, the value of the first element is returned, otherwise the value of the second element is returned
Null object null,undefined to False
Number zero is false
Empty string is False
Self-executing functions
?| 1234 | |
Prototype
Define a prototype method named close on the alert function.
?| 1 | Alert.prototype.close =function(e) { /*...*/} |
What is the prototype, the benefits of prototyping, can look at my blog JS article.
Here's how to invoke the prototype method
?| 12 | varalert = newAlert();alert.close(); |
Jquery
Binding events
?| 12 | $(‘td‘).on("click",function(e) {//todo}); //在td上绑定click$(‘td).off(‘click‘); // 在td上禁用click事件 |
And in BS,
?| 12 | $(document).on(‘click.bs.carousel.data-api‘,‘td‘,function(e){}; $(document).off(‘.carousel.data-api‘); |
When the above is used, there is one more parameter in the middle, and the selector becomes the document. The advantage is that only one click event is bound to the document, and the bubbling mechanism is used to check if the TD element is being processed if it is clicked. When we use TD as the selector, the number of TD elements on a page will be bound to how many click events, so performance will be greatly reduced. This 3-parameter pattern is called the enjoy meta mode.
$ (selector). Data ()
Collects all custom attributes that begin with data-on the specified element and merges it into an object literal.
?| 1 | <divid="abc" data-role="aaa" data-toggle="toggle"></div> |
If you want to get the AAA value in Data-role,
?| 1 | $("‘#abc").data("role"); |
Extended
Less is a kind of CSS preprocessing technology, which is a kind of dynamic style language, which belongs to CSS preprocessing language.
HTML5 aided design
In BS, there are custom attributes that do not start with data-, which we call auxiliary properties.
These properties are HTML5 's new concept, used to support people with disabilities, seniors, low-level, or temporary illnesses using screen readers for page access.
Aria-hidden= "true" means that the div element is hidden from the screen reader
Role= "Navigation" indicates that the zone is used for navigation
[Bootstrap]7 days in-depth Bootstrap (1) Get Started
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
