Bootstrap 3.0 study notes for beginners

As the first article of this study note, we will start with an introduction to Bootstrap, just like other articles in the series, and then proceed step by step.

Preface

In the previous section, https://www.jb51.net/web/248352.html mainly briefly introduced Bootstrap. It is not difficult to find from the Chinese website http://www.bootcss.com/ that there are now documentation descriptions for two versions. It seems that the difference between the two versions is quite large.

However, judging from the update of Visual Studio 2013, Microsoft has added the new version of Bootstrap3 to VS, so there is nothing much to say, and there is no need to worry about learning Bootstrap3.

Download BootStrap

The documents on the official website are very detailed and simple, and there are multiple ways to download them. For us developers, the easiest way is probably to directly download the compiled and compressed CSS and JavaScript files, which also include font files, but do not include documents and source code files. After opening the unzipped package, you can find that it contains three folders: css, fonts, and js.

You can view the files in three folders

This is the most basic Bootstrap organization: uncompressed files that can be used directly in any web project. We provide minified (bootstrap.min.*) and unminified (bootstrap.*) CSS and JS files. The font icon files come from Glyphicons.

The bower.json file lists the jQuery versions that Bootstrap supports.

You can see that the version of the dependent jQuery library is >= 1.9.0.

Next, visit http://jquery.com/

I will download the latest version 2.03

You can directly access http://code.jquery.com/jquery-2.0.3.min.js through IE

Save it to the js folder under the Bootstrap folder.

Note: All Bootstrap plugins require jQuery. We recommend using the compressed version in formal projects because it is smaller in size (with the comments and spaces removed).

Using Bootstrap in your website

We created a simple basic template


 Copy code
 The code is as follows:

 <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim and Respond.js 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="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
 <script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
 <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1. First, we can reference Bootstrap's style file as a web page


 Copy code
 The code is as follows:
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

2. If you need to use the JavaScript plug-in provided by the Bootstrap architecture, you need to link the js file of the architecture to the web page. As mentioned above, JavaScript plug-ins are dependent on the jQuery library, so of course we also need to link and reference the jQuery library file


 Copy code
 The code is as follows:
 <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script>

3. The viewport <meta> tag, which can modify the display on most mobile devices to ensure proper drawing and touch screen scaling.


 Copy code
 The code is as follows:
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

4. We use some new tags in HTML5, but browsers below IE9 do not support these tags, and cannot add styles to these tags. So to fix this problem we need to link the referenced files as follows


 Copy code
 The code is as follows:

 <!--[if lt IE 9]>
 <script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
 <script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
 <![endif]-->

This means that if the user's IE browser version is less than IE9, then these two js file libraries will be loaded, and now these new tags can be used and styles can be added to these tags.

Just like this, our simplest Hello World! page is presented to you.

Summarize

We also enabled responsive layout above. Of course, some websites may not require a responsive layout, so we need to manually disable this layout. This document also has detailed instructions.

In the next section, we will mainly learn about the layout of Bootstrap.

<<: Disadvantages and reasonable use of MySQL database index

>>: React implements the addition, deletion, modification and query of todolist

In-depth understanding of Vue transition and animation

Bootstrap 3.0 study notes for beginners

In-depth understanding of Vue transition and animation

Can Docker become the next "Linux"?

How to install the latest version of docker using deepin apt command

Solve the problem when setting the date to 0000-00-00 00:00:00 in MySQL 8.0.13

Ubuntu 20.04 turns on hidden recording noise reduction function (recommended)

Example code for implementing transparent gradient effects with CSS

Detailed explanation of Nginx reverse generation Mogilefs distributed storage example

JavaScript common statements loop, judgment, string to number

mysql splits a row of data into multiple rows based on commas

MySQL 8.0.19 winx64 installation tutorial and change the initial password under Windows 10

Recommend

Vue3.0 adaptive operation of computers with different resolutions

Answers to several high-frequency MySQL interview questions

The core process of nodejs processing tcp connection

How to switch directories efficiently in Linux

A collection of possible problems when migrating sqlite3 to mysql

Use viewport in meta tag to define screen css

In-depth understanding of this in JavaScript

Parent-child component communication in Vue and using sync to synchronize parent-child component data

Summary of MySQL's commonly used concatenation statements

abbr mark and acronym mark

JavaScript implements draggable modal box

How to backup and restore the mysql database if it is too large

How to Rename Multiple Files at Once in Linux

Detailed example of MySQL joint table update data

WeChat applet picker multi-column selector (mode = multiSelector)