简介

BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Otto和Jacob Thomton开发的. BootStrap是2011年八月在GitHub上发面的开源产品.

为什么使用BootStrap

  • 移动设备优先的响应式网格, 从BootStrap3.0开始, 框架将包含了移动终端设备的优先的样式.
  • 浏览器支持IE, Firefox, opera, chrome, safari.
  • 基于WEB字体的图标, 适用于移动及高密度屏幕(高清屏).
  • 使用更简单, 让开发者更容易上手, 只要你具备HTML和CSS的基础知识.
  • 响应式设计, 这也是BootStrap最大的特色, 它能够自适应于台式机, 平板电脑和手机.
  • 标记和样式更加简洁高效.
  • 包含了功能强大的内置组件, 易于定制.
  • 它是开源的, 可以根据需求任何更改源码.

BootStrap包的内容

  • 基本结构: BootStarp提供了一个带着网络系统, 链接样式, 背景的基本结构.
  • css: 自带, 全局的css设置, 定义基本的HTML元素样式, 可扩展的class, 以及一个先进的网格系统.
  • 组件: 包含了十几个可重用的组件, 用于创建图像, 下拉菜单, 导航, 警告, 弹出框等等.
  • JavaScript插件: 包含了十几个自定义的jQuery插件.
  • 定制: 我们可以根据实际的需求定制BootStrap的组件等.

实例展示

常见网站基本框架:

下载

下载之前先去准备一个代码编辑器,比如像 notepad ++,并且最好能了解点 HTML 与 CSS 的知识。我们不会去说明源代码,不过你可以下载它们。我们主要是介绍编译之后的 Bootstrap 文件的使用。

下载编译

获得编译后和最小化的 CSS,JS还有图像文件是最快速的启动方法。不包含文档和原始代码文件。

下载 Bootstrap

获得所有 CSSJavaScript 原始文件,另外还包含一个说明文档的本地版本,可以直接在 GitHub 中下载最新的版本。

文件结构

在下载里你可以找到下面这些文件和内容,按类型分了组,提供了编译之后和最小化两个版本。

下载编译之后的压缩包,解压以后你会得到下面这些文件:

这是 Bootstrap 最基础的东西:编译后的这些文件可以快速地用在所有 Web 项目上。我们提供了编译后的 CSS 和 JS (bootstrap.),另外还有编译后并最小化的 CSS 和 JS (bootstrap.min.)。图像使用了 ImageOptim 进化压缩。这是用在 Mac 上的压缩 PNG 图像的软件。

要注意的是,所有 JavaScript 插件都需要用到 jQuery

包含的东西

Bootstrap 有很多东西,了解它们可以参阅 Bootstrap 使用说明。

文档章节

  1. 布局的网格系统的使用
  2. 基础的 HTML 元素的样式,比如文字排版,代码,表格,表单,按钮,还包含一个来自 Glyphicons 的图标集。
  3. 常用界面组件的基本样式,比如像选项卡,导航栏,警示,页面标题等等。
  4. JavaScript 插件与组件类似,工具提示,对话框等等。

组件列表

组件 和 JavaScript 插件 提供了下面这些界面元素:

在以后的说明文档里,我们会详细的逐个介绍。在此之前,你可以查看这个文档来学习如何使用和定制它们。

基础 HTML 模板

想要使用 Bootstrap,可以基于这个简单的 HTML 模板,这里面包含了我们在 文件结构 里提到的所有东西。

下面是一个典型的 html 文件:

把它变成 Bootstrap 模板,只需要包含合适的 CSSJS 文件:

用这两个添加的文件,你就可以开发基于 Bootstrap 的应用了。

示例代码

响应式

为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

示例

网格(栅格)系统 (Grid System)

  • 包含了水平和垂直方向的参考线,用来合理排列内容。

最基本的网格系统是由一系列水平和垂直并且彼此交叉的线组合而成的, 这让web设计布局变得更加简单, 而且让内容更加有可读性. BootStrap提供了一套响应式, 移动设备优先的流式网格系统, 随着屏幕或视窗尺寸的增加, 系统会自动最多分为12列.下面就介绍一下网格的工作原理.

  • 行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中, 以便为其赋予合适的排列(aligment)和内补(padding)
  • 通过行(row)在水平方向创建一组列(column)
  • 内容应当放置于列(column)内, 并且, 只有列(column)可以作为行(row)的直接子元素.
  • 类似.row.col-xs-4这种预定义的类, 可以用不算数快速创建栅格布局.
  • 通过为列(column)设置padding属性, 从而创建列与列之间的间隔. 通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding, 也就间接为行(row)所包含的列(column)抵消掉了padding.
  • 如果一行(row)中包含了的列(column)大于12, 多余的列(column)所在的元素将被作为一个整体另起一行排列.

现在流行网站参考

  • [京东]
  • [淘宝]
  • [纽约时报]
  • [亚马逊]
  • [BBC]

网格参数

|  超小屏幕手机(<768px) | 小屏幕平板(>=768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) |
| 网格系统行为 | 总是水平排列 | 开始是堆叠在一起的, 当大于这些阈值进将变为水平排列C | 相同 | 相同 |

| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |

| 列数 | 12 | 12 | 12 | 12 |

| 最大列 | 自动 | 62px | 81px | 97px |

| 宽 | 30px (每列左右均有 15px) | 相同 | 相同 | 相同 |

实例: 从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

参考代码:

实例: 流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

实例: 移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*.col-md-*。请看下面的实例,研究一下这些是如何工作的。

实例: 手机, 平板, 桌面

在上面案例的基础上,通过使用针对平板设备的 .col-sm-* 类,我们来创建更加动态和强大的布局吧。

现在总结一下:

  • 当处于那个屏幕尺寸的时候, 那个设置生效.
  • xs: 0 ~ <768px
  • sm: 768px <= ~ <992px
  • md: 992px <= ~ 1200px
  • lg: 1200px <= ~

  • 注意: 如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。

设置列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。其中.col-md-offset-4是向右偏移4列.

设置排列

通过使用 .col-md-push-*.col-md-pull-* 类就可以很容易的改变列(column)的顺序。.col-md-push-*是向右浮动, .col-md-pull-*是向左浮动. *是代表浮动的列等份.(1~12)

排版

标题

HTML 中的所有标题标签,<h1><h6> 均可使用。另外,还提供了 .h1.h6类,为的是给内联(inline)属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。small标签中的line-height:1, 字体的大小h1~h3变为主标题的65%, h4~h6变为主标题的75%.

段落

Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p>(段落)元素还被设置了等于 1/2 行高margin-bottom=10px。

如果要突出显示某个段落内容, 则只需在这标签中添加class='lead'.

BootStrap基本控件的更多相关文章

  1. bootstrap日期控件(双日期、清空等问题解决)

    bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...

  2. Bootstrap 时间控件datetimepicker与timepicker

    一.datetimepicker 首先,我们看看点击选择时间的时候的展示页面吧 年                                                月           ...

  3. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  4. angularjs 整合bootstrap 时间控件

    一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...

  5. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  6. 在asp.net mvc4项目里bootstrap datetimepicker控件的使用

    前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...

  7. bootstrap 时间控件带(时分秒)选择器

    1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...

  8. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  9. NVelocity+Bootstrap tab控件 异常之

    异常信息:Encountered "tings" at line 54, column 55.Was expecting one of:   "(" ...   ...

  10. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

随机推荐

  1. Sqlite小数作差,会减不尽?

    select 6307.65-5922.68 from CW_ZWMX 以上语句,在设Navigate中执行的结果是:384.969999999999 不解!!!

  2. Ehcache和Spring整合

    Ehcache是使用Java编写的缓存框架,比较常用的是,整合在Hibernate和MyBatis这种关系型数据库持久框架. 不过现在用NoSQL也比较盛行,要应用Ehcache,整合起来就没法按照那 ...

  3. [Linux] IP绑定解释 BindIp

    一.缘由: 今天安装Mongodb,本来想限制只能内网或者某几台机器可以访问,看到配置文件有个net.bindIp选项, 就自以为是的认为,他可以像nginx那样限制访问来源IP,其实大错特错.这里配 ...

  4. pip/easy_install failure: failed to create process

    使用pip install requests安装requests, 报错: failed to create process 解决方法: 执行Python -m pip install --upgra ...

  5. 设置maven默认的JDK版本

    在pom文件中添加如下 : <build> <plugins> <plugin> <groupId>org.apache.maven.plugins&l ...

  6. CSS盒子模型与box-sizing

    今天在学习的时候偶然看到一张图片: 我瞬间瞪大了眼睛:width和height竟然不包括padding和border!! 过去所学知识有问题!在我的印象里,width应该是包含padding和bord ...

  7. javascript面向对象之一

    问题:怎么动态设置和读取一个对象的属性?   <script type="text/javascript"> function User(property){ for( ...

  8. 服务器未能识别 HTTP 标头 SOAPAction 的值

    SOAPAction HTTP request header被用来标识SOAP HTTP请求的目的地,其值是个URI地址.SOAP发送并不限制格式.URI特征或其必须可解析,那么在这种情况下,发送一个 ...

  9. 高级搜索插件solis search在umbraco中的使用

    好久没有写关于umbraco的博客了,这段时间在研究solis search,感觉它太强大,好东西是需要分享的,所以写一篇简单的使用博客分享给个人umbraco爱好者. 简介 在了解solis sea ...

  10. Solr部署到Tomcat

    1.版本选择 solr-5.3.1.tgz apache-tomcat-8.0.29.tar.gz 2.解压tomcat和solr [root@iZ23exixsjaZ solr]# .tar.gz ...