Bootstrap笔记1--准备工作

最新推荐文章于 2024-04-30 01:26:22 发布

erdouzhang

最新推荐文章于 2024-04-30 01:26:22 发布

阅读量406

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/erdouzhang/article/details/60867420

版权

Bootstrap 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Bootstrap中文网

1.准备库

Bootstrap库下载：http://download.csdn.net/detail/erdouzhang/9775679

我把下面用到的库都统一放在lib目录下，便于引用。

这里写图片描述

2.准备项目各个文件

这里写图片描述

3.准备sass

我是使用sass来编写css,如果你直接使用css那么第三步省略。如果也使用sass来编写css,请参考sass安装、sass编译成css（你也可以用gulp来自动生成，我这里没有使用）

在项目根目录打开命令窗口

compass create
compass watch

4.准备入口文件

编辑器打开项目目录，建index.html入口文件。
在js目录中建main.js文件（文件名随意）

index.html代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!-- 设置当前html文件字符编码 -->
    <meta charset="utf-8">
    <!-- 设置浏览器兼容模式版本 让IE使用最新的渲染引擎工作 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 声明当前网页在移动端浏览器中展示的相关设置 user-scalable=no不允许用户缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" >
    <title>响应式页面</title>
    <!-- 引入Bootstrap核心的样式表文件 -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="stylesheets/main.css">
    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/main.js"></script>
    <!-- html5shiv让浏览器可以识别html5新标签 -->
    <!-- respond.js 让低版本浏览器可以使用css3的媒体查询-->
    <!-- HTML5 shim and Respond.js for 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="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>

</body>
</html>