![](https://img-blog.csdnimg.cn/20190110204409638.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Bootstrap3实用教程
全面介绍 Bootstrap3 框架,包括 Bootstrap3基本样式、Bootstrap3组件、Bootstrap3插件等
ixygj197875
十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、Sass、Less、JavaScript、jQuery、JSON、Python、PHP、Bootstrap、Django等,著有《HTML宝典》、《揭秘CSS》、《Sass简明教程》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,多个开源项目托管在 GitHub。
展开
-
Bootstrap3 Font Awesome 字体图标的堆叠
堆叠的图标Font Awesome还支持将多个图标叠加在一起组成一个复合图标。如果想要将多个图标堆叠起来,需要给容器元素添加.fa-stack类,为图标元素使用.fa-stack-1x作为正常比例的图标,使用.fa-stack-2x作为大一些的图标。还可以为图标元素使用.fa-inverse类让图标颜色反色,为容器元素添加 .fa-lg、或.fa-2x、或.fa-3x、或.fa-4x、或.fa...原创 2019-06-05 15:04:22 · 1171 阅读 · 0 评论 -
Bootstrap3 Font Awesome 字体图标带动画的图标
带动画的图标Font Awesome不仅支持固定角度的旋转,还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转,还可以使用.fa-pulse类让图标以 8 步为周期进行旋转,它们尤其适合表示刷新、加载等功能的图标,如.fa-spinner、.fa-refresh和.fa-cog等:<divclass="fa-3x"> <iclass="fa ...原创 2019-06-05 15:03:27 · 1612 阅读 · 0 评论 -
Bootstrap3 Font Awesome 字体图标旋转或翻转图标
旋转或翻转图标Font Awesome提供了一组样式类,可以对图标进行固定角度的旋转或翻转。这些类分别是 .fa-rotate-90(顺时针旋转90度)、.fa-rotate-180(顺时针旋转180度)、.fa-rotate-270(顺时针旋转270度)、.fa-flip-horizontal(水平翻转)、.fa-flip-horizontal(垂直翻转)。如:<divclass...原创 2019-06-05 15:02:39 · 3605 阅读 · 1 评论 -
Bootstrap3 Font Awesome 字体图标带边框的图标
带边框的图标使用.fa-border类,可以类轻易构造出带有圆角边框的图标。还可以添加.pull-right或.pull-left类,让图标向右或向左浮动,所有图标都支持这两个类。如:<div> <iclass="fa fa-quote-left fa-3x fa-border pull-left"></i> <p>歪脖网(waibo....原创 2019-06-05 15:01:53 · 705 阅读 · 0 评论 -
Bootstrap3 Font Awesome 字体图标的尺寸
图标的尺寸通过应用.fa-lg、.fa-2x、.fa-3x、.fa-4x、.fa-5x类,让图标变得更大。按先后顺序,这些类所对应的图标大小按 33% 依次递增。如:<iclass="fa fa-camera-retro fa-lg"></i> <iclass="fa fa-camera-retro fa-2x"></i> <i...原创 2019-06-05 15:01:00 · 876 阅读 · 0 评论 -
Bootstrap3 Font Awesome 字体图标的基本图标
基本图标Font Awesome图标跟Glyphicon图标的用法完全相同,所有图标都需要一个基类 .fa和对应每个图标的 .fa-*类。只需创建一个行内元素,并为它应用图标类,即可使用Font Awesome图标。如:<iclass="fa fa-camera-retro"></i>效果如图 5‑1所示:图5-1 基本图标关于作者...原创 2019-06-05 14:59:34 · 1860 阅读 · 0 评论 -
Bootstrap3 Font Awesome 字体图标
简介Font Awesome 是一套绝佳的图标字体库,它提供可缩放的矢量图标,并且可以通过CSS来设置大小、颜色、阴影或者其它任何支持的效果。Font Awesome具有以下特性:一个字库,675 个免费图标。 完全免费,包括商业用途。 最初是为Bootstrap设计的,现在可以适用于所有框架。 完全不依赖JavaScript,不存在任何兼容性问题。 兼容桌面应用。 只要CSS支...原创 2019-06-05 14:58:14 · 943 阅读 · 0 评论 -
Bootstrap3 Affix插件
AffixAffix插件(affix.js)是一个很有用的插件,它可以让你的导航始终都固定在某个位置。一开始的时候,导航出现在页面的某个位置,当页面滚动一定距离时,无论页面如何滚动,它都固定在一个位置,就像被帖在页面上一样。Affix插件被翻译为多种中文名称,如粘条、固定导航等,每种翻译都很难准确表达作者的原意。本文干脆不做翻译,直接使用Affix了事,免得画蛇添足。以下是Affix插...原创 2019-06-04 16:19:01 · 1154 阅读 · 0 评论 -
Bootstrap3 输入提示插件typeahead
输入提示输入提示是一个表单输入辅助类型的插件,它简单、易于扩展,可以在用户输入过程中,针对用户的输入快速地给出输入提示。在Bootstrap2中,输入提示是一个标准插件,到了Bootstrap3,它已经被独立出来,不再是Bootstrap的标准插件。如果要使用输入提示插件的功能,可以从Bootstrap2中拷贝 bootstrap-typeahead.js 文件。输入提示插件的基本原理...原创 2019-06-04 16:18:17 · 2843 阅读 · 0 评论 -
Bootstrap3 轮番插件的事件
轮番插件的事件Bootstrap为轮番插件定义了两个事件,通过这些事件,可以监听播放行为及轮番组件的状态。这些事件及含义见表 4‑12。表 4‑12 轮番插件的事件及含义 事件 含义 slide.bs.carousel 当 slide 实例方法被调用时,立即触发该事件 slid.bs.carousel 当切换完一帧后,触发该事件 如,希望在轮番切换过程中,整...原创 2019-06-03 16:23:36 · 313 阅读 · 0 评论 -
Bootstrap3轮番插件的选项
轮番插件的选项Bootstrap为轮番插件提供了 4 个选项,这些选项都可以通过 data 属性或JavaScript进行设置。选项的详细说明见表 4‑11:表 4‑11 carousel插件的选项 名称 类型 默认值 说明 interval number 5000 自动循环时,每个项目延迟的时间量。如果为 false,轮播将不会自动循环 pa...原创 2019-06-03 16:22:54 · 281 阅读 · 0 评论 -
Bootstrap3 轮番插件的调用方式
轮番插件的调用方式1、JavaScript调用JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可。格式为:$('.carousel').carousel();除此之外,Bootstrap还提供了其它一些方法,可以根据需要选择使用。这些方法为:.carousel('cycle'):从左向右循环播放。 .carousel('pause...原创 2019-06-03 16:22:18 · 507 阅读 · 0 评论 -
Bootstrap3 轮番插件的使用方法
轮番Bootstrap 的轮番插件(carousel.js)是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件,它的内容可以是图片、视频、或者其他任何内容。使用方法Bootstrap中的轮番由一个 class="carousel" 的容器定义,其中包含轮番指示器、轮番内容、轮番的控制按钮。为了确保在播放时,能够对控制按钮和轮番指示器进行正常定位,需要为容器定义一个 id。如:...原创 2019-06-03 16:21:32 · 673 阅读 · 0 评论 -
Bootstrap3 折叠插件的事件
折叠插件的事件Bootstrap还为折叠组件提供了一组事件,通过这些事件,可以监听用户的行为及折叠组件的状态。这些事件及含义见表 4‑10。表 4‑10 折叠插件的事件及含义 事件 含义 show.bs.collapse 调用show方法时,立即触发该事件 shown.bs.collapse 当可折叠元素对用户完全可见(会等待过渡效果执行结束)后,触发该事件 ...原创 2019-06-02 18:52:17 · 790 阅读 · 0 评论 -
Bootstrap3 折叠插件的选项
折叠插件的选项Bootstrap为折叠插件提供了 2 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 4‑9。表 4‑9 collapse插件的选项 名称 类型 默认值 说明 parent 选择器 false 如果指定了选择器,则该选择器指定的父元素下,同一时刻只能显示一个折叠面板 toggle bool...原创 2019-06-02 18:51:35 · 397 阅读 · 0 评论 -
Bootstrap3 折叠插件的调用方式
折叠插件的调用方式折叠插件的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用。1、data 属性调用要激活折叠插件的激活行为,首先为标题部分的链接定义 data-toggle="collapse" 属性,还要为包含框定义 id,并在标题中通过 data-parent 属性指向该 id,以便在同一个包含框中同时只能有一个内容部分被显示出来。如:...原创 2019-06-02 18:50:24 · 539 阅读 · 0 评论 -
Bootstrap3 折叠插件的使用方法
折叠折叠插件(collapse.js)可以很容易地让页面区域折叠起来。当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单可以节约页面空间,方便用户浏览。使用方法Bootstrap中,折叠组件的基本结构是在一个 class="accordion" 的容器中,包含一个或多个 class="accordion-group" 的折叠面板子容器。如:<div...原创 2019-06-02 18:49:16 · 2069 阅读 · 0 评论 -
Bootstrap3 按钮组插件
按钮组将按钮组放在特定的容器中,不必编写JavaScript代码,就可以让按钮组具有HTML的复选框(checkbox)或单选框(radio)的效果。1)复选按钮组复选按钮组是类似于复选框的一组按钮,用户可以选择按钮组中的多个按钮。要添加这个功能,只需给 .btn-group 的按钮组容器添加 data-toggle="buttons " 属性,并将一组包含复选框的 <label...原创 2019-06-01 17:54:21 · 493 阅读 · 0 评论 -
Bootstrap3 按钮状态切换
按钮状态切换将单个按钮的 data-toggle 属性设置 button,或通过简单的JavaScript编程,就可以激活按钮的行为状态,让它在未激活和激活状态之间来回切换。如:<buttonclass="btn btn-primary"data-toggle="button"autocomplete="off">Single Toggle</button>...原创 2019-06-01 17:53:30 · 4263 阅读 · 0 评论 -
Bootstrap3 按钮状态提示
按钮Bootstrap中的按钮插件(button.js)被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。在页面多次加载之间,Firefox 仍然保持表单控件的状态(禁用状态和选择状态)。一个解决办法是为按钮设置 autocomplete="off"属性。状态提示通过自定义属性和简单的JavaScript编程,就可以让按钮具有状态提示功能。比如,...原创 2019-06-01 17:52:41 · 1246 阅读 · 0 评论 -
Bootstrap3 警告框插件的事件
警告框插件的事件警告框有两个可以被监听的事件。见表 4‑8。表 4‑8 警告框的事件及含义 事件 含义 close.bs.alert close方法被调用后,立即触发该事件 closed.bs.alert 当警告框已经被关闭(会等待过渡效果执行结束)之后,触发该事件 如,要在警告框关闭之后执行操作,代码可以这样写:<script> $('#...原创 2019-05-31 16:21:41 · 540 阅读 · 0 评论 -
Bootstrap3 警告框插件的使用方法
警告框警告框插件(alert.js)仅仅为警告框组件一个关闭功能,即点击警告框的关闭按钮,可以让警告框消失,并将它从 DOM 中删除。使用方法为警告框添加一个可选的.alert-dismissible类和一个关闭按钮,就可以为警告框组件提供关闭功能。关闭按钮可以使用.close的任何元素定义,无论使用什么元素,都必须使用 .close 类,并包含 data-dismiss="alert...原创 2019-05-31 16:21:00 · 1836 阅读 · 0 评论 -
Bootstrap3 弹出提示插件的方法
弹出提示插件的方法1、.popover (options)使用一个可选的对象参数 options调用某个页面元素的弹出提示。如:$('#element').popover({ placement:right })2、.popover('show')手动弹出某个页面元素的弹出提示。如:$('#element').popover('show')3...原创 2019-05-30 21:21:42 · 936 阅读 · 0 评论 -
Bootstrap3 弹出提示插件的选项
弹出提示插件的选项Bootstrap为工具提示插件提供了 11 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。这些选项详细见表 4‑7:表 4‑7 popover插件的选项 名称 类型 默认值 说明 animation boolean true 为工具提示应用CSS淡入淡出过渡效果 container str...原创 2019-05-30 21:14:08 · 622 阅读 · 0 评论 -
Bootstrap3 弹出提示插件的使用方法
弹出提示弹出提示(popover.js)是工具提示的子类,它比工具提示多了一个 content 参数,是工具提示插件的拓展。弹出框依赖于工具提示插件tooltip.js,如果你定制了 Bootstrap,就一定要将依赖的插件编译进去。使用方法你可以给任何元素添加弹出提示,并通过 title 属性定义提示的标题,通过 data-content 属性定义提示的内容。如:&...原创 2019-05-30 21:13:19 · 1482 阅读 · 0 评论 -
Bootstrap3 工具提示插件的事件
工具提示插件的事件Bootstrap为工具提示插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑6。表 4‑6 tooltip插件的事件及含义 事件 含义 show.bs.tooltip show方法调用之后,立即触发该事件。 shown.bs.tooltip 当工具提示已经对用户可见(并且过渡效果执行完毕)...原创 2019-05-29 14:46:42 · 307 阅读 · 0 评论 -
Bootstrap3 工具提示插件的方法
工具提示插件的方法1、.tooltip(options)使用一个可选的对象参数 options调用某个页面元素的工具提示。如:$('#element').tooltip({ placement:right })2、.tooltip('show')手动触发某个页面元素的工具提示,并在工具提示被实际显示出来之前(即shown.bs.tooltip事件被触发之前)...原创 2019-05-29 14:45:59 · 395 阅读 · 0 评论 -
Bootstrap3 工具提示插件的选项
工具提示插件的选项Bootstrap为工具提示插件提供了 10 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。这些选项详细见表 4‑5:表 4‑5 tooltip插件的选项 名称 类型 默认值 说明 animation boolean true 为工具提示应用CSS淡入淡出过渡效果 container str...原创 2019-05-29 14:45:16 · 282 阅读 · 0 评论 -
Bootstrap3 工具提示插件的使用方法
工具提示当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能。HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏览器就会将 title 属性的值作为提示信息显示出来。由于原生的工具提示样式单调、功能单一,经常需要自己去开发相关的工具提示功能。鉴于此,Bootstrap提供了一个工具提示插件,它功能完善,...原创 2019-05-29 14:44:33 · 1396 阅读 · 0 评论 -
Bootstrap3 滚动监听插件的事件
滚动监听插件的事件Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮显示。你可以通过JavaScript监听activate.bs.scrollspy事件,来执行你所需要的操作。如:$('#myScrollspy').on('acti...原创 2019-05-28 17:25:47 · 699 阅读 · 0 评论 -
Bootstrap3 滚动监听插件的方法
滚动监听插件的方法通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM。<script> $('[data-spy="scroll"]').each(function(){ var$spy=$(this).scrollspy('refres...原创 2019-05-28 17:25:09 · 321 阅读 · 0 评论 -
Bootstrap3 滚动监听插件的选项
滚动监听插件的选项Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10。正值表示滚动条向上偏移,负值表示向下偏移。offset选项可以通过 data 属性或JavaScript进行设置。如果使用data属性,则要将选项名称放在 data- 的后面,类似于 data-offset="100"。如果使用JavaScrip...原创 2019-05-28 17:24:31 · 511 阅读 · 0 评论 -
Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式。大多数时候是监听<body>元素。1、data属性调用只需给你想监听的元素定义 data-spy="scroll" 属性和 data-target 属性。并把data-target 属性的值设置为监听对象的 id 即可。如:<div...原创 2019-05-28 17:23:54 · 373 阅读 · 0 评论 -
Bootstrap3 滚动监听的使用方法
滚动监听Bootstrap的滚动监听插件(scrollspy.js)能够根据滚动的位置,自动更新导航条中相应的导航项。什么是滚动监听?先看一个简单的例子:假设页面上有两个区域,一个是导航区域,一个是内容区域。导航区域的每个链接,都指向内容区域的一个锚点。这样的话,点击导航上的某个链接,就可以跳转到内容区域的相应锚点。滚动监听,就是实现内容区域和导航链接的反向关联。简单地讲,就是在滚动内...原创 2019-05-28 17:23:07 · 2492 阅读 · 1 评论 -
Bootstrap3 下拉菜单的事件
下拉菜单的事件Bootstrap为下拉菜单插件提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑3。表 4‑3 dropdown插件的事件及含义 事件 含义 show.bs.dropdown show方法调用之后,立即触发该事件 shown.bs.dropdown 当下拉菜单已经对用户可见(并且过渡效果执行完毕)...原创 2019-05-27 16:10:09 · 3237 阅读 · 0 评论 -
Bootstrap3 下拉菜单及其调用方式
下拉菜单Bootstrap中,你可以为任何组件(如,导航条、胶囊式导航、标签导航、按钮等)添加下拉菜单。下拉菜单组件负责外观,下拉菜单插件(dropdown.js)负责交互行为,即控制下拉菜单组件的显示或隐藏。调用方式1、data属性调用为超链接或按钮添加 data-toggle="dropdown" 属性,即可激活下拉菜单的交互行为。如:<divclass=...原创 2019-05-27 16:09:24 · 3264 阅读 · 0 评论 -
Bootstrap3 模态对话框的事件
模态对话框的事件Bootstrap为模态对话框插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑2。表 4‑2 modal插件的事件及含义 事件 含义 show.bs.modal show方法调用之后,立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过event.relatedTarget属性进行访问...原创 2019-05-26 15:44:14 · 799 阅读 · 0 评论 -
Bootstrap3 模态对话框的方法
模态对话框的方法1、.modal(options)使用一个可选的对象参数 options调用模态对话框。如:$('#myModal').modal({ backdrop:false, keyboard:false })2、.modal('toggle')手动打开或隐藏一个模态对话框。在模态框显示或隐藏之前,也就是在触发shown.bs.modal或hi...原创 2019-05-26 15:43:35 · 1854 阅读 · 0 评论 -
Bootstrap3 模态对话框的选项
模态对话框的选项Bootstrap为模态对话框提供了 4 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置。见表 4‑1:表 4‑1 modal插件的选项 名称 类型 默认值 说明 backdrop boolean true 模态对话框是否包含一个黑色半透明背景。取值为 false 时,不包含背景;取值为 true 时,包...原创 2019-05-26 15:43:01 · 390 阅读 · 0 评论 -
Bootstrap3 模态对话框的调用方式
模态对话框的调用方式可以通过 data 属性或 JavaScript,让模态框动态显示或隐藏。Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为,并且还会自动生成一个.modal-backdrop元素,用于在模态框的外面提供一个可点击区域,点击该区域,就会关闭模态框。1、data属性调用使用 data 属性调用方式,无需编写 Java...原创 2019-05-26 15:42:07 · 794 阅读 · 0 评论