In this article, we mainly learn about the history, features, uses of Boostrap, and why Boostrap was chosen to develop our web projects.
Key points for learning:
1.Bootstrap Overview
2.Bootstrap features
3.Bootstrap structure
4. Create the first page
5. Various preparations for learning
1. Bootstrap Overview
Bootstrap is an open source framework based on HTML, CSS, and JavaScript developed by two technical engineers from Twitter (the world's largest Weibo). The framework code is simple and visually beautiful, and can be used to quickly and simply build web page requirements based on PC and mobile devices.
In June 2010, engineers inside Twitter solved the problem of collaboration and unification in front-end development tasks. After various solutions, Bootstrap was finally confirmed and released in August 2011. After a long period of iteration and upgrading, the original CSS-driven project has developed into an open source framework with a multi-functional web front-end with many JavaScript plug-ins and icons built in.
The most important part of Bootstrap is its responsive layout, which can be compatible with page access on PC, PAD and mobile phones.
Bootstrap download and demonstration:
Domestic document translation official website: http://www.bootcss.com
Piaocheng Web Club official website: http://www.ycku.com
2. Bootstrap features
Bootstrap is very popular thanks to its very practical features and features. The main core functions are as follows:
(1). Cross-device, cross-browser
It is compatible with all modern browsers, including the more criticized IE7 and 8. Of course, this course no longer considers browsers below IE9.
(2). Responsive layout
It can not only support displays at various resolutions on the PC side, but also supports responsive switching displays of mobile PAD, mobile phone and other screens.
(3). Comprehensive components provided
Bootstrap provides highly practical components, including: navigation, labels, toolbars, buttons and other components, which are convenient for developers to call.
(4). Built-in jQuery plug-in
Bootstrap provides many practical jquery plug-ins, which facilitate developers to implement various general special effects in the web.
(5). Support HTML5 and CSS3
HTML5 semantic tags and CSS3 properties are well supported.
(6). Support LESS dynamic style
LESS uses variables, nesting, and operations to write faster and more flexible CSS. It works well with Bootstrap.
3. Bootstrap structure
First of all, if you want to understand the document structure of Boostrap, you need to download it locally on the official website. The Bootstrap download address is as follows:
Bootstrap download address: http://v3.bootcss.com/ (Select production environment, v3.3.4)
After decompression, the directory presents a structure like this:
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
└── glyphics-halflings-regular.woff2
It is mainly divided into three core directories: css (style), js (script), and fonts (font) .
1. There are four files with css suffix in the css directory. The ones containing the word min are compressed versions, which are generally used; the ones that do not contain are files without compression, and you can learn to understand the css code; while the file with map suffix is a css source code mapping table, which is used in some specific browser tools.
2.js directory contains two files, which are uncompressed and compressed js files.
3.fonts directory contains font files with different suffixes.
4. Create the first page
We create an HTML5 page, introduce the core file of Bootstrap, and then test whether it displays normally.
//The first Bootstrap
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Bootstrap Introduction</title> <link rel="stylesheet" href="css/bootstrap.min.css"></head><body> <button>Bootstrap</button> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script></body></html>
5. Various preparations for learning
1. Development tools . We use Sublime Text3 as the development tool for Bootstrap and installed the Emmet code generation plug-in;
2. Test tools , in addition to conventional modern browsers, are secondly as mobile testing tools. We use Opera Mobile Emulator and Chrome's mobile web testing tools.
3. The required foundation is at least the foundation of the HTML5 season 1 course. Bootstrap has many jQuery plug-ins built in. Although it is much simpler to use than jQuery or JS itself, if you have the foundation of jQuery and JS courses, you will have a deeper understanding of your learning;
4. Course resolution : Basic courses, we use 1024 x 768 to record, but some special parts, such as responsive and project courses, require high resolution recording, and will use 1440 x 900 to record.
If you still want to learn in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.