Bootstrap 3.0 study notes for beginners

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

Recommend

Solve the problem of secure_file_priv null

Add secure_file_priv = ' '； then run cmd ...

A brief discussion on the principle of js QR code scanning login

Table of contents The essence of QR code login Un...

The MySql 8.0.16 version installation prompts that "UTF8B4" is used instead of "UTF8B3"

When installing in MySQL 8.0.16, some errors may ...

Detailed tutorial on installing pxc cluster with docker

Table of contents Preface Preliminary preparation...

Analysis of the Nesting Rules of XHTML Tags

In the XHTML language, we all know that the ul ta...

MySQL controls the number of attempts to enter incorrect passwords

1. How to monitor MySQL deadlocks in production e...

Sample code for displaying a scroll bar after the HTML page is zoomed out

Here is a record of how to make a scroll bar appe...

Quickly obtain database connection information and some extensions through zabbix

background As the number of application systems c...

JavaScript pre-analysis, object details

Table of contents 1. Pre-analysis 1. Variable pre...

Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7

Preface Recently, I found a pitfall in upgrading ...

Install Kafka in Linux

Table of contents 1.1 Java environment as a prere...

Small details of web front-end development

1 The select tag must be closed <select><...

MySQL 5.7.18 winx64 installation and configuration method graphic tutorial

The installation of compressed packages has chang...

Tutorial on deploying the open source project Tcloud with Docker on CentOS8

1. Install Docker 1. I installed Centos7 in the v...

Summary of two methods to implement vue printing function

Method 1: Install the plugin via npm 1. Install n...