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

bootstrap起步

2016-02-15 21:10 543 查看

bootstrap起步

官方文档：bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

个人想法：作为一名web开发人员，工作中大部分时间在写后台，前端知识部分相对薄弱，有了bootstrap之后就可以快速的搭建一个美观的页面，不用再愁于页面的样式怎么写，只需要给html元素添加相应的class即可。能够在没有交互资源投入的情况下开发出美观的页面。

bootstrap官方网站：http://www.bootcss.com/

bootstrap中文文档路径：http://v3.bootcss.com/

搭建第一个bootstrap页面。

1 创建一个html界面

2 声明html头

3 编写html元参数。 html的meta元素：编码，IE模式，页面宽度和缩放比

4 引入bootstrap的css文件

5 引入html5元素和媒体查询支持的js文件for IE8

6 编写html dom元素，增加class属性

7 引入jquery.js

8 引入bootstrap.js

如下

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>第一个bootStrap页面</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
<p>hello bootstrap!</p>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航