Blazers' Blog

导航

Bootstrap 学习日志（一）

跟着师傅，自学了两周的前端开发，慢慢的从几乎零基础开始学起，发现前端开发真的比之前想象的要有趣的多，难度也大的多

 

当然难度并非代码逻辑上的难度，而是根据你需要制作的网页，选择最合适的主题，最合适的配色，等等等等

 

我觉得也能通过这次学习收获不少之前只写代码的“码农生活”之外的其他更有意义的东西

 

话不多说 回归主体

 

Bootstrap是Twitter退出的一个基于JQuery的框架，是为了前端开发者更方便的制作漂亮而简单的Web前端而开发的

 

我们就来看看如何使用这个框架写出一个最简单的DEMO

 

参考资料全部来自 http://www.bootcss.com/  Bootstrap中文网

 

①：首先你需要下载或在线直接引入Bootstrap的css以及js文件到你的HTML页面中

<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

②开始写入基本的HTML元素 ， 当你引入了Bootstrap之后，一些基本元素就会采用Bootstrap的样式，包括字体等等

直接在 <body> 标签里加入

<h1>Hello, world!</h1>

运行网页，效果就是这样的

OK最简单的例子已经完成了。

 

推荐大家去GITHUB下载全部的源代码，另外在下载的文件中 docs/example 里面也有很多基本的例子便于开始学习

 

最后推荐采用Webstrom IDE 进行开发，这样在新建项目的时候变可以指定采用Bootstrap框架，而他也会自动将框架下载到你的项目目录中，非常的方便

posted on 2014-03-08 17:46  Blazers' Blog  阅读(398)  评论(0)  编辑  收藏  举报