Bootstrap框架的学习教程详解(二)

Bootstrap框架的学习教程详解(二)

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、css、javascript 的，它简洁灵活，使得 Web 开发更加快捷。

一、下载Bootstrap

Bootstrap （当前版本 v3.3.0）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。

下载地址：http://v3.bootcss.com/getting-started/#download

PS：其实我们不用下载bootstrap也可以使用它：

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

二、预编译版

下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ └── bootstrap-theme.min.css

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

└── glyphicons-halflings-regular.woff

PS：字体可以添加也可以不添加

三、实例一

运行截图如下图所示：

四、实例二

栅格系统是Bootstrap的和具有优势。采用的是流式的栅格系统，对宽度进行12等分。

Previous

Next

看看>看看

看看

<a href="#" class="list-group-item">看看

看看

看看

看看

«

»

效果如图所示

以上所述是给大家介绍的Bootstrap框架的学习教程详解(二),希望对大家有所帮助，如果大家有任何疑GFLjWWcwT问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。