Liu Bo
Live long and prosper. Don't panic.
前端框架 Bootstrap 介绍
-- What/Why/How
About Me (Too)
Python Web 后台开发
FCC 前端萌新
toolib@gmail.com
我不是大神
Not a real programmer
Thanks
Bootstrap 是什么？
- 基于HTML，CSS，JS的简洁灵活的流行前端框架及交互组件集 V3
- 为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等
- 它的最新版本是4.0，国内目前用的较多的是3.x
为什么要用 Bootstrap？
- Twitter 出品，大厂开源产品 Github
- 基于 Less，丰富的 Mixin
- Responsive 的栅格系统（Grid），移动设备优先
- 丰富的组件（HTML和JS）
- 插件（比如 icon font -- Font Awesome）
怎么使用
- Getting Start (install/setup...)
- 网络教程、资源和社区
- 定制和 Less
示例代码 -- 引入文件
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>示例代码 -- 栅格布局
<div class="row">
<div class="col-md-8" style="border-width:1px;"></div>
<div class="col-md-4" style="border-width:1px;"></div>
</div>
<div class="row">
<div class="col-md-8 col-xs-6 col-lg-4" style="border-width:1px;"></div>
</div>相关资源
- Bootswatch - 免费的 Bootstrap 主题包
- Font Awesome, the iconic font and CSS toolkit
- BootCDN 开源项目免费 CDN 服务
Bootswatch
前端框架 Bootstrap 介绍
By Liu Bo
前端框架 Bootstrap 介绍
什么是 Bootstrap，为什么要使用，如何使用
