Bootstrap (Web框架)
Bootstrap是美国Twitter公司的设计师Mark Otto 和 Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷,ootstrap 是 2011 年八月在 GitHub 上发布的开源产品。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
Bootstrap 包的内容:
- 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
- CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
- 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
- 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
为什么使用 Bootstrap?
- 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持:所有的主流浏览器都支持 Bootstrap。
- 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件,易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页:
您会看到两个按钮:
- Get started:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Download:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码,您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件,Bootstrap 官方只支持 Recess,这是 Twitter 的基于less.js的 CSS 提示。
为了更好的了解和更方便的使用,我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的,在独立的功能开发中,您不必每次都包含这些独立的文件。
文件结构
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:
如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。
Bootstrap 源代码
如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:
- less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
- dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
- docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
Bootstrap (Web框架)相关推荐
- Bootstrap(Web框架)的简单使用教程
前言 我们在写前端网页的时候,如果全部都是自己一点一点的编写,工作量巨大,效率不高,而且界面可能也不一定符合大众审美:因此就有了框架来让开发变得更加的简单,且更有效率,而这Web开发中,Bootstr ...
- Bootstrap(Web框架)
上次运用了layui的框架 感觉非常实用,这次来了解与使用一下bootstrap框架.这次我们先来主要的了解一下bootstrap框架. 基本结构:Bootstrap 提供了一个带有网格系统.链接样式 ...
- java web 框架整合开发_SpringBoot(二)Web整合开发
本篇文章接着上篇内容继续为大家介绍spring boot的其它特性(有些未必是spring boot体系桟的功能,但是是spring特别推荐的一些开源技术本文也会介绍),对了这里只是一个大概的介绍,特 ...
- Web框架之Django_02基本操作(Django项目启动配置、数据库连接、orm、增删改查)
阅读目录 摘要: Django项目简单现实过程 pycharm连接数据库 Django之orm简单操作增删改查 一.新建Django项目.配置.设置: 新建Django项目:(为了熟悉Django操作 ...
- java商城_基于Java,jfinal web框架开发出微信商城,微信分销商城源码分享
项目简介: 专门针对微信服务号开发的一套微信商城,微信分销商城,支持商品多规格,支持按地区设置邮费,支持限时打折,订单返现,满减送,满包邮,支持订单打印,订单打印模板自定义,发货单打印,发货单打印模板 ...
- Web框架——Flask系列之Flask简介(一)
一.Web应用程序作用 Web(World Wide Web)诞生最初的目的,是为了利用互联网交流工作文档 二.关于Web框架 (一)什么是Web框架? 已经封装好了一段代码,协助程序快速开发,相当于 ...
- Django基础-Web框架-URL路由
Django基础-Web框架-URL路由 一.Django基础–Web框架 MVC和MTV框架 MVC 把Web应用分为模型(M).视图(V).控制器(C)三层,他们之间以一种插件式的,松耦合的方式联 ...
- 基于C++的高性能http框架cinatra及其web框架示例feather介绍及开发演示
说起web开发框架,一定会想到java,php,python等快速开发语言,在从多web开发技术中少有使用C++进行开发,虽然C++性能优越,但是由于开发周期长,语言本身的复杂性,不符合当前快速敏捷开 ...
- Python常见web框架汇总
目前,有非常多的Python框架,用来帮助你更轻松的创建web应用.这些框架把相应的模块组织起来,使得构建应用的时候可以更快捷,也不用去关注一些细节(例如socket和协议),所以需要的都在框架里了. ...
- pythondjangoweb典型模块开发实战 pdf下载_胡阳《Django企业开发实战高效Python Web框架指南》PDF及代码...
Python社区中的框架Django 的定位是企业级开发框架,全功能 Web开发框架,少代码快速开发 Web应用.从开发速度还是上线后新功能的迭代,Django 都能很好地满足需求. 学完 Pytho ...
最新文章
- Cocoa 框架 For iOS(一) 框架的介绍,Objectivie-C运行时能力的解析等 (转载)
- 读《白帽子讲Web安全》之安全意识篇(一)
- JavaScript学习总结(八)——JavaScript数组
- 一汽奔腾b7o价位_全新奔腾B70正式上市,前脸被吐槽酷似某豪华品牌
- HDU3348 coins【贪心】
- 算法: 1和0子集合的个数 474. Ones and Zeroes
- 软件测试面试笔试题准备(sql增删改查语句超全整理!看这篇就够了)
- 计算机组成原理基本概念,《计算机组成原理》教学中几个基本概念的分析
- 教你巧用万用表测量大值电阻
- linux命令手册安卓版,linux手册app-linux手册 安卓版v3.0.0-PC6安卓网
- 信息安全网络安全到底有哪些资质?被大家追逐。。。
- C语言——医院挂号系统(队列)
- 导弹的坐标系、角度和力
- 从BIM到GIS(高级)| IFC LOD 200转LOD 3 CityGML
- mock server 挡板服务搭建
- Win32: 数据类型常用最大值和最小值
- Linux系统学习笔记二
- 用python来玩科学计算
- Kettle 使用详解
- pygame.surface.blit()方法4个参数的使用方法