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

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

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/

image.png


image.png


下载完后解压:



我们一般需要的就是:

CSS

image.png

JS

image.png


要想使用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的样式了哦。


目录
相关文章
|
6月前
|
移动开发 前端开发 小程序
分享46个Bootstrap模板,总有一款适合您
分享46个Bootstrap模板,总有一款适合您
120 1
|
6月前
|
前端开发 JavaScript
Boostrap技能点整理之【bootstrap简介】
Boostrap技能点整理之【bootstrap简介】
|
前端开发 JavaScript 容器
前端基础 - Bootstrap简介
前端基础 - Bootstrap简介
56 0
|
6月前
|
移动开发 监控 前端开发
分享42个Bootstrap模板,总有一款适合您
分享42个Bootstrap模板,总有一款适合您
130 4
|
6月前
|
移动开发 开发框架 前端开发
分享56个Bootstrap模板,总有一款适合您
分享56个Bootstrap模板,总有一款适合您
243 6
|
6月前
|
前端开发 JavaScript 视频直播
分享44个Bootstrap模板,总有一款适合您
分享44个Bootstrap模板,总有一款适合您
227 1
|
6月前
|
编解码 前端开发 JavaScript
BootStrap 响应式布局技术教程简介
BootStrap 响应式布局技术教程简介
131 1
|
12月前
|
前端开发
记录一款好用的bootstrap后台模板
记录一款好用的bootstrap后台模板
100 0
|
前端开发 JavaScript 程序员
推荐一些免费开源好看的bootstrap后台模板
推荐一些免费开源好看的bootstrap后台模板
622 0
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
64 0