Chapter 1: First introduction to Bootstrap_javascript skills

Learning points:

1.Bootstrap Overview

2.Bootstrap features

3.Bootstrap structure

4. Create the first page

5. Various preparations for learning

In this lesson, we mainly understand the history, characteristics, uses of Boostrap, and why we choose Boostrap to develop our web projects.

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 concise and visually beautiful, and can be used to quickly and easily build web page requirements based on PC and mobile devices.

In June 2010, engineers within Twitter worked to solve the problem of collaboration and unification in front-end development tasks. After going through various options, Bootstrap was finally finalized and released in August 2011. After a long period of iterative upgrades, it has developed from an initial CSS-driven project into a multifunctional web front-end open source framework with many built-in JavaScript plug-ins and icons.

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 demo:

Domestic document translation official website: http://www.bootcss.com

Laicheng Web Club official website: http://www.ycku.com

2. Bootstrap Features

Bootstrap is very popular due to its very useful functions and features. The main core functional features are as follows:

(1). Cross-device, cross-browser

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

Not only can it support displays of various resolutions on the PC side, but it also supports responsive switching display on mobile PAD, mobile phone and other screens.

(3). Comprehensive components provided

Bootstrap provides highly practical components, including: navigation, labels, toolbars, buttons and a series of 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 common special effects on the Web.

(5). Support HTML5, CSS3

HTML5 semantic tags and CSS3 attributes are well supported.

(6). Support LESS dynamic style

LESS uses mixed coding with variables, nesting, and operations to write faster and more flexible CSS. It can be developed 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 from the official website. Bootstrap download address is as follows:

Bootstrap download address: http://v3.bootcss.com/ (select the production environment, v3.3.4)

After decompression, the directory will have the following 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

is mainly divided into three core directories: css (style), js (script), and fonts (fonts).

1.css There are four files with the css suffix in the directory. The ones containing the word min are compressed versions. This is generally used; the files that do not include the files are uncompressed and you can learn about the css code; and the files with the map suffix are The file is a css source code mapping table, 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 your first page

We create an HTML5 page, import the core files of Bootstrap, and then test whether it displays normally.

//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap 介绍</title>
　　<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
　　<button class="btn btn-info">Bootstrap</button>
　　<script src="js/jquery.min.js"></script>
　　<script src="js/bootstrap.min.js"></script>
</body>
</html> 

5. Various preparations for studying

1. Development tools, we use Sublime Text3 as the development tool for Bootstrap, and installed the Emmet code generation plug-in;

2. Testing tools, in addition to conventional modern browsers, the second is as a mobile testing tool. We use Opera Mobile Emulator and Chrome’s mobile web testing tool.

3. The required foundation is at least the foundation of the HTML5 Season 1 course. Bootstrap has many built-in jQuery plug-ins. Although it is much simpler to use than jQuery or JS itself, if you have the foundation of jQuery and JS courses, then Learning and understanding will be deeper;

4. Course resolution: For 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 be recorded at 1440 x 900.

The above is the relevant knowledge of the Bootstrap framework introduced by the editor to you. I hope it will be helpful to you!