BootStrap基本控件

首页 > 代码库 > BootStrap基本控件

2024-08-17 07:19:28 220人阅读

简介

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

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

文件结构

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

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

技术分享

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

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

包含的东西

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

文档章节

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

组件列表

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

技术分享

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

基础 HTML 模板

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

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

技术分享

把它变成 Bootstrap 模板，只需要包含合适的 CSS 和 JS 文件：

用这两个添加的文件，你就可以开发基于 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列.

技术分享