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框架,而他也会自动将框架下载到你的项目目录中,非常的方便

原文地址:https://www.cnblogs.com/BlazersHome/p/3588275.html