Bootstrap手册介绍
1 Bootstrap框架
1.1 Bootstrap 简介
1.1.1 Bootstrap是什么
1.1.2 Hello World
1.1.3 Bootstrap 环境安装
1.1.4 文件结构
1.1.5 Bootstrap CDN推荐
1.2 Bootstrap 使用基础
1.2.1 基本的HTML模板
1.2.2 文档类型(Doctype)
1.2.3 移动设备优先
1.2.4 响应式图像
1.2.5 全局显示、排版和链接
1.2.6 容器(Container)
1.2.7 Bootstrap 浏览器/设备支持
1.3 Bootstrap 响应式设计
1.3.1 响应式设计原理
1.3.2 媒体查询实现断点
1.3.3 网格系统
1.3.4 网格系统实例
1.3.4.1 网格系统实例:从堆叠到水平排列
1.3.4.2 网格系统实例:中型和大型设备
1.3.4.3 网格系统实例:手机、平板电脑、台式电脑
1.3.4.4 列重置
1.3.4.5 偏移列
1.3.4.6 嵌套列
1.3.4.7 列排序
1.3.5 响应式实用工具
2 CSS样式
2.1 排版
2.1.1 标题
2.1.2 强调段落
2.1.3 强调内容
2.1.4 缩写
2.1.5 地址(Address)
2.1.6 引用(Blockquote)
2.1.7 列表
2.2 代码
2.3 表格
2.4 表单
2.4.1 表单布局
2.4.2 表单控件
2.4.3 表单控件状态
2.4.4 设置控件大小
2.4.5 表单帮助文本
2.5 按钮
2.6 图片
2.7 图标
2.8 辅助类
3 布局
3.1 下拉菜单
3.2 输入框组
3.3 按钮下拉菜单
3.4 按钮组
3.5 导航元素
3.6 导航栏
3.7 面包屑式导航
3.8 分页
3.9 标签
3.10 徽章
3.11 超大屏幕
3.12 缩略图
3.13 警示框
3.14 进度条
3.15 媒体对象
3.16 页面标题
3.17 列表组
3.18 面板
3.19 Well
4 JavaScript插件
4.1 概述
4.2 过渡
4.3 模态框
4.4 下拉菜单
4.5 滚动监控器
4.6 标签页
4.7 提示条
4.8 弹出框
4.9 警告框
4.10 按钮
4.11 折叠
4.12 轮播
4.13 附加导航
5 定制Bootstrap
5.1 GitHub项目
5.2 Less
5.3 SASS
5.4 VSCODE 编辑 Bootstrap
5.5 编译Bootstrap
5.6 Photoshop模板
5.7 主题
6 Bootstrap工具
6.1 可视化布局
6.2 字体图标设计

Bootstrap是什么

2017-05-05 15:21:00
admin
1771
最后编辑:admin 于 2018-04-27 11:28:14

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT、jQuery、Less(3.0)、SASS(4.0) 的。

历史

Bootstrap 是由 Twitter  Mark Otto  Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

 Mark Otto  Jacob Thornton最初发布 Bootstrap的时候,他们两位都在 Twitter工作。当时,他们面临着为公司内部提供一套标准化的前端开发工具的需求。在发布 Bootstrap的那篇博客中, Mark Otto这样介绍他们的新项目:
Twitter诞生初期,为了完成前端开发任务,工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。 Bootstrap最初就是这个问题的一个解决方案,而且在Twitter内部第一次Hackweek上得到了认可。 Hackweek结束后,我们手头上的项目已经相当稳定,可以在公司内部部署使用了。
——Mark Otto https://dev.twitter.com

Bootstrap是 2011年 8月发布的,发布之后就迅速走红。而且,它也从最初 CSS驱动的项目,发展到内置了很多 JavaScript插件和图标,并且涵盖了表单和按钮元素。 Bootstrap本身支持响应式 Web设计,而且拥有一个非常稳健的 12列、 940像素宽的网格布局系统。值得一提的是, Bootstrap网站( http://getbootstrap.com)上还提供了一个构建工具,让你根据自己的需求选择 CSS和 JavaScript功能。所有这一切让前端 Web开发有了前瞻性的设计和开发基础,开发效率倍增。上手使用 Bootstrap非常简单,跟在网站中整合 CSS和 JavaScript没有什么区别。

为什么使用 Bootstrap?

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

    Internet Explorer Firefox Opera Google Chrome Safari

  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件,易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

Bootstrap 包的内容

  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  • CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
  • JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
  • 定制:您可以定制 Bootstrap 的组件、LESS 变量或SASS变量和 jQuery 插件来得到您自己的版本。

 

 



    • 在线客服
    • 关注微信
    • 联系电话
      • 欢迎咨询
      • 欢迎加入QQ群 303257430
    • 公众号:源宝网络
      • 联系电话及微信号 18902328227