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

Bootstrap_01（入门 教程）

2013-01-30 07:50 417 查看
【前言】

机缘巧合之下得知了bootstrap，而且找到了它的中文网，学了点皮毛。

【网址】

bootstrap英文网：http://twitter.github.com/bootstrap/

bootstrap中文网：http://www.bootcss.com/

英文不好的推荐中文网，其实中文网就是英文网的翻译。

【配置】

1.到中文网后，点击下载bootstrap，如图



2.下载完之后解压缩得到三个文件夹：css，js，img，如图



css和js文件夹中都有经过压缩的文件，形如*.min.*的

3.在页面中导入两个css，两个js即可，在项目中结构如下，可以自己改：



4.导入css和js的代码如下，注意看代码的注释：

<!-- bootstrap基于html5 -->
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<!-- 这个是主要的css -->
<link href="../js/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 这个是响应式css，具体内容看网站介绍 -->
<link href="../js/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
</head>

<body>
<h1>Hello World!</h1>
<!-- 在html末尾引入js是为了加载时间快点 -->
<!-- bootstrap的所有js插件都是基于jquery的，需要引入jquery -->
<script src="../js/jquery.min.js"></script>
<!-- bootstrap的js文件，不得不说bootstrap很是简单呢 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>


5.至此使用bootstrap的所有工作就做完了，剩下的就是发挥你的想象去实现了。

【bootstrap的学习】

到bootstrap的中文网，从起步开始看，每个例子都自己做一遍就可以了。



需要说明的是，从脚手架到css，组件，到js插件都是可以定制的，

意思是可以根据自己的需求生成需要的css文件和js文件，详见定制
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航