admin 管理员组

文章数量: 1086019


2024年3月19日发(作者：selected是哪个国家的牌子)

中软国际-保险与证券业务线

Bootstrap入门教程

Bootstrap入门教程

赵俊明

2013/12/31

目录

Bootstrap起步

.................................................... 2

配置 ............................................................ 2

开发文件和基本模板 .............................................. 2

IE兼容模式 ..................................................... 3

基本CSS简介

..................................................... 3

HTML5文档类型 .................................................. 3

移动设备优先 .................................................... 3

栅格系统 ........................................................ 3

自适应布局案例 .................................................. 4

列偏移 .......................................................... 4

响应式工具 ...................................................... 5

打印Class ...................................................... 5

组件简解

.......................................................... 5

Glyphicons 图标 ................................................. 5

输入框组 ........................................................ 6

标签页 .......................................................... 6

胶囊式的标签页 .................................................. 7

面包屑导航 ...................................................... 7

可变标签 ........................................................ 7

徽章 ............................................................ 7

大屏幕介绍 ...................................................... 8

警告框 .......................................................... 8

进度条 .......................................................... 9

运动进度条 ...................................................... 9

堆叠效果 ........................................................ 9

Well ............................................................ 9

Javascript插件

................................................. 10

模态框 ......................................................... 10

通过data属性调用模态框 ........................................ 10

通过javascript调用模态框 ...................................... 11

弹出框 ......................................................... 11

警告框 ......................................................... 12

按钮 ........................................................... 13

Affix（导航定位） .............................................. 13

Bootstrap起步

配置

注意：由于Bootstrap依赖于Jquery，所以一定将放置在前面。

开发文件和基本模板

IE兼容模式

Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 标签加入到你的页面中：

基本CSS简介

HTML5文档类型

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参

照下面的格式进行设置。

移动设备优先

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

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。

栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口

（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，

还有强大的mixin用于生成更具语义的布局。

栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置

的class覆盖掉。因此，对任何一个元素应用任何.col-md- class 将不仅作用于中等尺寸

的屏幕，还将作用于大屏幕设备（如果没有设置.col-lg- class的话）。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

自适应布局案例

列偏移

响应式工具

通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。

栅格class在屏幕宽度大于或等于阈值的设备上起作用，并且将针对小屏幕设备所设置的class覆盖掉。因此，对任何

一个元素应用任何.col-md- class 将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备。

打印Class

和常规的响应式class一样，使用下面的class可以针对打印机隐藏或显示某些内容。

组件简解

Glyphicons 图标

图标 class 不能和其它元素联合使用，因为这些图标被设计为独立的元素、独立使用。

输入框组

标签页

胶囊式的标签页

面包屑导航

可变标签

徽章

大屏幕介绍

警告框

进度条

运动进度条

堆叠效果

Well

Javascript插件

你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript

代码。这是Bootstrap中的一等API，也应该是你的首选方式。

关闭DataAPI

关闭制定的DataAPI

模态框

通过data属性调用模态框

通过javascript调用模态框

如：

弹出框

通过JavaScript启用弹出框：

警告框

JS打开

JS关闭

data关闭

按钮

通过添加data-loading-text="正在加载..."可以使按钮呈现加载状态。

通过添加data-toggle="button"可以让按钮能够切换状态。

Affix（导航定位）

只需为需要监听的页面元素添加data-spy="affix"即可方便的添加affix行为。

通过JS启动Affix

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-

之后，例如data-offset-top="200"。

最后：请不要按照PC前端开发的思想做流式布局，因为那样会局限你的审美，要脱离现实，大胆想象，最后再结合现实。


本文标签： 设备 屏幕 元素 使用 需要

版权声明：本文标题：Bootstrap教程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1710795364a573512.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。