Introduction to BootStrap and how to deploy and install it (introduction)-HTML Tutorial-php.cn

Introduction to BootStrap and how to deploy and install it (introduction)

青灯夜游

Release： 2018-10-13 16:31:01

forward

3146 people have browsed it

This article will introduce to you what BootStrap is and how to deploy and install it. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. You can also visit bootstrap tutorial to get and learn more bootstrap related video tutorials.

Introduction to Bootstrap

What is Bootstrap?

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.

Bootstrap is an open source product released on GitHub in August 2011.

Bootstrap is a front-end framework for rapid development of web applications and websites.

##Bootstrap supports responsive layout and is compatible with many Access via terminals (computers, tablets, mobile phones).

##Deployment and installation of Bootstrap

##1. Download the bootstrap framework from the official website https://v3.bootcss.com/.

2. Put the downloaded framework into the root directory and import the file.

To support mobile device-first statements, you need to put them above the head tag

 <meta name="viewport" content="width=device-width, initial-scale=1">

Copy after login

and then introduce the bootstrap css file.

The bootstrap framework depends on jQuery, so you need to introduce the jQuery library first, and then introduce the bootstrap js file.

The following is a complete code that introduces the framework

(The bootstrap js file is best placed at the bottom of the body)

	<head>
		<meta charset="UTF-8">
		<!--支持移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>测试文档</title>
		<!--引入 Css 文件-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!--引入 jQuery 文件-->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<!--引入 bootstrap 框架 js 文件-->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>

Copy after login

3. You can also use the officially provided CDN

in the head tag, below the jQuery file

You must have an internet connection to access it Can.

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Copy after login

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of Introduction to BootStrap and how to deploy and install it (introduction). For more information, please follow other related articles on the PHP Chinese website!