codecamp

Bootstrap 简述

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。


Bootstrap



什么是 Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。


在现代 Web 开发中,有几个几乎所有的 Web 项目中都需要的组件。


Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。


此外,还有大量其他有用的前端组件,比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了这些,你可以搭建一个 Web 项目,并让它运行地更快速更轻松。


此外,由于整个框架是基于模块的,您可以通过您自己的 CSS 位,甚至是项目开始后的一个大整改,来进行自定义。


它是基于几种最佳实践,我们认为这是一个很好的开始学习现代 Web 开发的时机,一旦您掌握了 HTML 和 JavaScript/jQuery 的基本知识,您就可以在 Web 开发中运用这些知识。


虽然,也有批评,所有通过 Bootstrap 构建的项目看起来相同,您可以不需要知道太多的 HTML + CSS 知识就可以构建一个网站。但是,我们需要明白,Bootstrap 是一个通用的框架,就像任何其他通用的东西,您需要定制才能让它具有独特性。当您要定制时,您需要深入研究,没有良好的 HTML + CSS 基础是不可行的。


当然除了 Bootstrap,还有很多其他好的前端框架,使用哪种框架是开发人员的选择,但 Bootstrap 绝对是值得尝试的。


为什么使用 Bootstrap?

移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。


浏览器支持:所有的主流浏览器都支持 Bootstrap。


容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。


响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。


它为开发人员创建接口提供了一个简洁统一的解决方案。


它包含了功能强大的内置组件,易于定制。


它还提供了基于 Web 的定制。


它是开源的。


Bootstrap 包的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。


CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。


组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。


JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。


定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。



下载并理解文件结构

您可以从 https://github.com/twbs/bootstrap/archive/v3.0.0.zip https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip 上下载 Bootstrap Version 3.0.0。


此外,我们提供下载的代码包含了一个通过第一个链接下载的 bootstrap 代码文件夹。这里边也包含了用来定制 Bootstrap 的原始的 css 的 custom.css。


解压缩后,您会发现,在根文件夹 bootstrap-3.0.0 内有一些文件和文件夹。


主要的 CSS 文件 - bootstrap.css 以及它的简化版 bootstrap-min.css,位于根文件夹 bootstrap-3.0.0 下 的 'dist' 文件夹中的 'css' 文件夹中。


在 'dist' 内,有一个 'js' 文件夹,包含了主要的 JavaScript 文件 bootstrap.js 以及它的简化版。


在根文件内,有一个单独的 'js' 文件夹,包含了不同文件中的不同的 JavaScript 插件。


在根文件内的 'assets' 内,会找到另一个 'js' 文件夹。这里放置着 HTML5 shim 的 html5shiv.js,用于获得 IE8 支持。还有一个 respond.min.js 文件,用于支持 IE8 中的多媒体查询。该文件夹还包含了 Bootstrap 的 js 插件依赖的 jquery.js。


在相同的文件夹内,有一个 'ico' 文件夹,包含了 favicon 图标和各种移动设备图标。


在同一路径中的 'css' 文件夹,包含了文档的 css 文件。


'_includes' 和 '_layouts' 文件夹包含了一些默认的布局结构文件,这些可能对快速原型设计很有用。


根文件夹内的 'less' 文件夹包含了一些 .less 文件。如果您要基于 LESS 进行开发,这些文件将会很有用。


在根文件夹内,有一些文件。一些是用于基础原型设计的 HTML 文件,一些是用于基于 Bower 编译的 bower.json、browserstack.json。除此之外,还有 composer.json 和一个 YAML 文件 _config.yml。


Bootstrap 实例

<div class="container">
  <p>Create a responsive table with alternating cell background color:</p> 
  
  <div class="table-responsive"> 
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Street</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna Awesome</td>
          <td>Broome Street</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Debbie Dallas</td>
          <td>Houston Street</td>
        </tr>
        <tr>
          <td>3</td>
          <td>John Doe</td>
          <td>Madison Street</td>
        </tr>
      </tbody>
    </table>
  </div>


</div>


为什么选择 Bootstrap
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }