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

最新推荐文章于 2024-07-07 02:58:35 发布

谙忆

最新推荐文章于 2024-07-07 02:58:35 发布

阅读量6.2k

点赞数 6

分类专栏： ❷ Java之行 ----- ⑥、框架/第三方工具 ----- ----- BootStrap 文章标签： bootstrap javascript html css 设计师

本文链接：https://blog.csdn.net/qq_26525215/article/details/54585307

版权

❷ Java之行同时被 3 个专栏收录

222 篇文章 10 订阅

订阅专栏

----- ⑥、框架/第三方工具

82 篇文章 2 订阅

订阅专栏

----- ----- BootStrap

6 篇文章 0 订阅

订阅专栏

转载请注明出处：http://blog.csdn.net/qq_26525215

本文源自【大学之旅_谙忆的博客】

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/

下载完后解压:

我们一般需要的就是:
CSS

JS

要想使用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>