BootStrap简介

什么是BootStrap

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。

基于 HTML、CSS、JAVASCRIPT。

主要是前端的框架(HTML、CSS、JS)。

(使用BootStrap前需要先导入JQurey)

Bootstrap有什么样的特点?

学习比较简单,只要有了一定的HTML、CSS、JS基础,就可以学习。

响应式布局。

移动设备优先。

Bootstrap环境安装

下载网址:

BootStrap3: ​​http://v3.bootcss.com/​

BootStrap4: ​​http://v4.bootcss.com/​

【BootStrap】Bootstrap简介、环境安装与基本模板_css

【BootStrap】Bootstrap简介、环境安装与基本模板_html_02

下载完后解压:

【BootStrap】Bootstrap简介、环境安装与基本模板_css_03

我们一般需要的就是:

CSS

【BootStrap】Bootstrap简介、环境安装与基本模板_设计师_04

JS

【BootStrap】Bootstrap简介、环境安装与基本模板_javascript_05

要想使用Bootstrap必须要先加载jquery。

Bootstrap基本模板

HTML5文档类型定义

Boostrap的文档是基于HTML5的。因此,要使用HTML5的文档类型定义(DTD)。

<!DOCTYPE html>

字符集设置

<meta charset="utf-8">

设置移动设备优先

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

引入CSS和JS文件

<!DOCTYPE html>
<html>
<head>
<title>BootStrap基础入门</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery.slim.min.js" ></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.min.js" ></script>
</head>
<body></body>

</html>

好了,上面那个就是一个最简单的模板了,然后你可以直接使用bootstrap的样式了哦。



作者:谙忆, 所有权利保留。

欢迎转载,分享是进步的源泉。