您的位置：首页 > Web前端 > BootStrap

bootstrap简介及使用前的准备工作

2018-02-04 12:44 316 查看

bootstrap简介及使用前的准备工作

一、bootstrap简介
       bootstrap是webcss框架,集合了html/css/jquery为一家创建响应式的页面。常用来做响应式页面。响应式:适配不同的上网设备。

二、使用步骤
1、下载bootstrap
                        网站:http://www.bootcss.com/   。  下载:用于生产环境(上线)的 Bootstrap
2、导入bootstrap.css
3、导入jquery.css
4、导入bootstrap.js
5、增加一个meta标签，支持移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">

6、将所有的内容放入带布局容器中
        Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类
方式1:
<div class="container"></div>
方式2:
<div class="container-fluid"></div>
三、代码演示
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<!--支持移动设备，移动设备优先. device设备。initial初始化为1不缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>入门</title>
<!--导入CSS-->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<!--导入JQ.JS-->
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/jquery-1.11.0.min.js"></script>
<!--导入bootstrap.js-->
<script type="text/javascript"  src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
      <!--<div class="container=fluid" style="border:solid red 1px">
 我是container方式
</div>-->

<!--<div class="container" style="border:solid red 1px">
我是container方式
</div>-->
<div  style="border:solid red 1px">
我是一般的默认方式
</div>
</body>

</html>

 四、效果展示







内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航