The first contact Bootstrap_javascript skill of bootstrap development combat

This article is mainly about Boostrap history, features, uses, and why we chose boostrap to develop our WEB projects.

Learning points:
1.Bootstrap Overview
2.Bootstrap Features
3.BOOTSTRAP structure
4. Create the first page
5. Preparation for the study

I. Overview of BOOTSTRAP
Bootstrap is an open source framework based on HTML, CSS, and JavaScript, developed by two technical engineers from Twitter, the world's largest microblogging company. The framework is concise and visually graceful, and can be used to quickly and easily build Web page requirements for PCs and mobile-based devices.
In the June 2010, Twitter's in-house engineers worked to solve the problem of collaboration in front-end development tasks. After a variety of scenarios, Bootstrap was eventually finalized and released in August 2011. After a long period of iterative upgrades, the original CSS-driven project developed into an open source framework for a multi-functional Web front-end with many JavaScript plug-ins and icons built into it.
The most important part of Bootstrap is its responsive layout, which is compatible with page access at the PC end, pad, and mobile end of the mobile phone.

Bootstrap Download and Demo:
Domestic Documents Translation official website: http://www.bootcss.com
Scoop City Web Club website: http://www.ycku.com

Ii. Characteristics of Bootstrap
Bootstrap is very popular, thanks to its very practical features and features. The main core features are as follows:

(1). Cross-device, cross-browser
It can be compatible with all modern browsers, including the more reviled IE7, 8. Of course, this course no longer considers IE9 the following browsers.
(2). Responsive layout
not only can support the display of various resolutions on the PC side, but also support the mobile end PAD, mobile phone screen, such as the response of the switch display.
(3). Comprehensive components provided
Bootstrap provides a very practical component, including navigation, tags, toolbars, buttons and a series of components to facilitate developers to call.
(4). Built-in JQuery Plugin
Bootstrap offers a number of practical jquery plug-ins that make it easy for developers to implement a variety of common effects on the Web.
(5). Support HTML5, CSS3
HTML5 semantic tags and CSS3 attributes are well supported.
(6). Support less dynamic style
less uses variables, nesting, and manipulating the code to write faster, more flexible CSS. It and Bootstrap can be very good with the development.

III. Structure of Bootstrap
First of all, to understand the Boostrap document structure, you need to download it to the local website first. The bootstrap download address is as follows:
Bootstrap Download Address: http://v3.bootcss.com/(select production environment, v3.3.4)

After decompression, the directory renders such a 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

Mainly divided into three core categories:CSS (style), JS (script), fonts (font) .
A file with four CSS suffixes in the 1.CSS directory, which contains the Min typeface, is a compressed version, the general use of this; does not contain compressed, can learn to understand the CSS code files, and the map suffix file is the CSS Source mapping table, in some specific browser tools to use.
The 2.js directory contains two files, which are uncompressed and compressed JS files.
The 3.fonts directory contains font files with different suffixes.

Four, create the first page
we create a HTML5 page and introduce the Bootstrap core file, and then test whether it will be displayed properly.
The first one Bootstrap

 <! DOCTYPE html>  
 

V. Preparation of the study
1. Development tools , we use sublime Text3 as a bootstrap development tool, and installed the Emmet code generation plug-in;
2. Testing Tools , in addition to the regular modern browsers, followed by the mobile end of the test tool, we use here is Opera Mobile emulator, and Chrome Mobile Web test Tool.
3. The required basis , at least HTML5 first-quarter course foundation, Bootstrap built-in a lot of jquery plug-ins, although the use of jquery or JS itself is much simpler, but if there is the basis of jquery and JS courses, the learning comprehension is deepened Into
4. Course resolution : Basic Course, we use 1024 x 768来 recording, but some special parts, such as response and project course, require a large resolution recording, the 1440 x 900来 recording is used.

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Tutorials Bootstrap actual combat

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.