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

Docker image creation Dockerfile and commit operations

Build the image There are two main ways to build ...

Simple use of Vue vee-validate plug-in

Table of contents 1. Installation 2. Import 3. De...

Angular performance optimization: third-party components and lazy loading technology

Table of contents Overview Environment Preparatio...

Detailed steps to install mysql5.7.18 on Mac

1. Tools We need two tools now: MySQL server (mys...

12 Javascript table controls (DataGrid) are sorted out

When the DataSource property of a DataGrid control...

How to store text and pictures in MySQL

Large Text Data Types in Oracle Clob long text ty...

Solutions to problems using addRoutes in Vue projects

Table of contents Preface 1. 404 Page 1. Causes 2...

How to make select support readonly when the background cannot read data when the disabled attribute is set

Copy code The code is as follows: <span style=...

Possible reasons why the input type="reset" tag in HTML is invalid (does not work).

When using the <html:reset> tag, sometimes w...

Teach you how to build the vue3.0 project architecture step by step

Table of contents Preface: 1. Create a project wi...

MySQL data type selection principles

Table of contents Small but beautiful Keep it sim...

Design a data collector with vue

Table of contents Scenario Core Issues Status mon...

Linux hardware configuration command example

Hardware View Commands system # uname -a # View k...

Two ways to add a mask effect to the background image using background-color through CSS

If a div sets background-color and background-ima...

MySQL method of generating random numbers, strings, dates, verification codes and UUIDs

Table of contents Generate random numbers Generat...