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>
四、效果展示
备注:由于个人原因,本博客暂停更新。如有问题可联系本人,本人提供技术指导、学习方向、学习路线。本人微信wlp1156107728(添加注明来意) QQ1156107728(添加注明来意)