Bootstrap 学习日志（一）

最新推荐文章于 2021-03-30 23:26:37 发布

林尧彬

最新推荐文章于 2021-03-30 23:26:37 发布

阅读量562

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/BlazersHome/p/3588275.html

版权

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

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

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

话不多说回归主体

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

林尧彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 学习日志（一）

跟着师傅，自学了两周的前端开发，慢慢的从几乎零基础开始学起，发现前端开发真的比之前想象的要有趣的多，难度也大的多当然难度并非代码逻辑上的难度，而是根据你需要制作的网页，选择最合适的主题，最合适的配色，等等等等我觉得也能通过这次学习收获不少之前只写代码的“码农生活”之外的其他更有意义的东西话不多说回归主体Bootstrap是Twitter退出的一个基于JQu...
复制链接

扫一扫