前端框架 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

Made with Slides.com