Bootstrap
文章平均质量分 87
Bootstrap技术学习
梁辰兴
深情不及久伴,紘爱无需多言。
展开
-
1.1 Bootstrap 简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。历史Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。为什么使用 Bootstrap?移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。原创 2023-06-21 14:46:07 · 381 阅读 · 0 评论 -
1.2 Bootstrap 环境安装
如果您使用的是未编译的源代码,您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件,Bootstrap 官方只支持 Recess,这是 Twitter 的基于 less.js 的 CSS 提示。为了更好的了解和更方便的使用,我们将在本教程中使用 Bootstrap 的预编译版本。由于文件是被编译过和压缩过的,在独立的功能开发中,您不必每次都包含这些独立的文件。文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。的字体,这是一个可选的。原创 2023-06-21 14:52:46 · 346 阅读 · 0 评论 -
2.1 Bootstrap CSS 概览
除此之外,点击过的链接,会呈现一个颜色码为 #333 的细的虚线轮廓。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,以致于您的代码不能通过 W3C 标准的验证。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备。原创 2023-06-26 10:38:21 · 808 阅读 · 0 评论 -
2.2 Bootstrap 网格系统
摘自维基百科:在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。Bootstrap 官方文档中有关网格系统的描述:Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。原创 2023-06-28 09:24:43 · 637 阅读 · 0 评论 -
2.3 Bootstrap 排版
title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到。Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为。使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。,您需要使用标签来为封闭的地址文本添加换行。为了给段落添加强调文本,则可以添加。(设置文本为父文本大小的 85%)、(设置文本为更粗的文本)、(设置文本为斜体)。原创 2023-06-28 21:59:51 · 371 阅读 · 0 评论 -
2.4 Bootstrap 代码
请确保当您使用 和 标签时,开始和结束标签使用了。原创 2023-07-02 17:15:28 · 333 阅读 · 0 评论 -
2.5 Bootstrap 表格
内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。Bootstrap 提供了一个清晰的创建表格的布局。如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加。下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。,还有一些可以用来为标记定义样式的类。这些类可被应用到 、 或 。除了基本的表格标记和。原创 2023-07-02 17:22:10 · 481 阅读 · 0 评论 -
2.6 Bootstrap 表单
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。Bootstrap 提供了下列类型的表单布局:基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:内联表单如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 标签添加 class .form-inline。默认情况下,Bootstrap 中的 input、se原创 2023-07-02 17:37:07 · 997 阅读 · 0 评论 -
2.7 Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。您可以在 、 或 元素上使用按钮 class。但是建议您在 元素上使用按钮 class,避免跨浏览器的不一致性问题。Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。原创 2023-07-02 17:46:20 · 388 阅读 · 0 评论 -
2.8 Bootstrap 图片
在本章中,我们将学习 Bootstrap 对图片的支持。.img-responsive 类将 max-width: 100%;和 height: auto;通过在 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。以下类可用于任何图片中。原创 2023-07-13 20:57:09 · 410 阅读 · 0 评论 -
2.9 Bootstrap 辅助类
如需对齐导航栏中的组件,请使用 .navbar-left 或 .navbar-right 代替。您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。下面的实例演示了这点。您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏(包括屏幕阅读器)。您可以通过使用 class .sr-only 来把元素对所有设备隐藏,除了屏幕阅读器。以下不同的类展示了不同的文本颜色。如需清除元素的浮动,请使用 .clearfix class。原创 2023-07-13 21:17:45 · 199 阅读 · 0 评论 -
2.10 Bootstrap 响应式实用工具
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。除了 相关的元素的特殊情况外,它们与。的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的。需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。使用这些切换打印内容。因此,以超小屏幕(xs)为例,可用的。原创 2023-07-13 21:21:47 · 210 阅读 · 0 评论 -
3.2 Bootstrap 下拉菜单(Dropdowns)
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。内加上下拉菜单即可。来向右对齐下拉菜单。如需使用下拉菜单,只需要在 class。原创 2023-07-13 21:49:18 · 1012 阅读 · 0 评论 -
3.3 Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group。当您向让下拉菜单与一系列按钮组合使用时,就会用到这个。下面的实例演示了上面表格中讨论到的 class。下面的实例演示了上面表格中讨论到的。原创 2023-07-16 22:36:02 · 223 阅读 · 0 评论 -
3.4 Bootstrap 按钮下拉菜单
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式,但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能,右边是显示下拉菜单的切换。菜单也可以往上拉伸的,只需要简单地向父。来指示按钮作为下拉菜单。原创 2023-07-16 22:39:54 · 447 阅读 · 0 评论 -
3.5 Bootstrap 输入框组
注意:为了保持跨浏览器的兼容性,请避免使用 元素,因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class,输入框组是一个孤立的组件。通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加。原创 2023-07-16 22:44:29 · 1375 阅读 · 0 评论 -
3.6 Bootstrap 导航元素
您可以在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified,让标签式或胶囊式导航菜单与父元素等宽。它们使用相同的标记和基类 .nav。如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可,其他的步骤与上面相同。您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked,让胶囊垂直堆叠。原创 2023-07-16 23:04:47 · 249 阅读 · 0 评论 -
3.7 Bootstrap 导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。默认的导航栏创建一个默认的导航栏的步骤如下:下面的实例演示了这点:为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 中。折叠起来的导航栏原创 2023-07-16 23:21:31 · 963 阅读 · 0 评论 -
3.8 Bootstrap 面包屑导航(Breadcrumbs)
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。原创 2023-07-18 23:53:39 · 891 阅读 · 0 评论 -
3.9 Bootstrap 分页
如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。本章将讲解 Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。下表列出了 Bootstrap 提供的处理分页的 class。原创 2023-07-18 23:54:38 · 719 阅读 · 0 评论 -
3.10 Bootstrap 标签
下面将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。原创 2023-07-18 23:55:41 · 1103 阅读 · 0 评论 -
3.11 Bootstrap 徽章(Badges)
下面将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。当没有新的或未读的项时,通过 CSS 的 :empty 选择器,徽章会折叠起来,表示里边没有内容。徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把。您可以在激活状态的胶囊式导航和列表导航中放置徽章。添加到链接、Bootstrap 导航等这些元素上即可。原创 2023-07-18 23:56:23 · 922 阅读 · 0 评论 -
3.12 Bootstrap 超大屏幕(Jumbotron)
下面将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。原创 2023-07-18 23:57:52 · 940 阅读 · 0 评论 -
3.13 Bootstrap 页面标题(Page Header)
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。原创 2023-07-18 23:58:24 · 377 阅读 · 0 评论 -
3.14 Bootstrap 缩略图
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。把带有 class .thumbnail 的 标签改为 。在该 内,您可以添加任何您想要添加的东西。由于这是一个 ,我们可以使用默认的基于 span 的命名规则来调整大小。如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。原创 2023-07-18 23:59:11 · 217 阅读 · 0 评论 -
3.15 Bootstrap 警告(Alerts)
您可以通过创建一个 ,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。本章将讲解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class。警告(Alerts)向用户提供了一种定义消息样式的方式。为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件。原创 2023-07-19 16:16:29 · 903 阅读 · 0 评论 -
3.16 Bootstrap 进度条
注意:Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。您甚至可以堆叠多个进度条。这将会使条纹具有从右向左的运动感。原创 2023-07-20 23:42:00 · 156 阅读 · 0 评论 -
3.18 Bootstrap 列表组(List Group)
我们可以向上面已添加链接的列表组添加任意的 HTML 内容。原创 2023-07-22 10:42:18 · 1120 阅读 · 0 评论 -
3.19 Bootstrap 面板(Panels)
为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 中即可。元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组。注意:面版脚注不会从带语境色彩的面板中继承颜色和边框,因为它不是前景中的内容。原创 2023-07-22 10:43:08 · 401 阅读 · 0 评论 -
3.20 Bootstrap Well
您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。Well 是一种会引起内容凹陷显示或插图效果的容器 。为了创建 Well,只需要简单地把内容放在带有 class .well 的 中即可。原创 2023-07-22 10:43:48 · 164 阅读 · 0 评论 -
4.1 Bootstrap UI 编辑器
除了以上这些,更吸引人的是它有个非常活跃的 Bootply 社区,用户可以很方便的发现,分享和展示相关的代码和片段。有了这个工具,用户可以自定义颜色,大小,字体,格式,表,按钮,警告信息,导航条,菜单等等元素。从 body 风格,字体排版,按钮,导航,格式,通知提示和其他用户很容易根据自己的意愿自定义的元素。当用户做好了相应的修改,可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件。更厉害的是,它可以运行一个已验证的,不需要本地后台支持,数据库驱动的 web 应用。原创 2023-07-23 12:03:28 · 834 阅读 · 0 评论 -
4.2 Bootstrap HTML编码规范
除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。] 属性的规范名称,并且不要在首尾添加空白符。元素的布尔型属性如果有值,就是 true,如果没有值,就是 false。原创 2023-07-23 12:05:26 · 168 阅读 · 0 评论 -
4.3 Bootstrap CSS编码规范
例如,HTML 的 heading 元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。MDN(Mozilla Developer Network)上一片非常好的关于shorthand properties 的文章,对于不太熟悉简写属性声明及其行为的用户很有用。当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。原创 2023-07-23 12:07:50 · 644 阅读 · 0 评论 -
5.1 Bootstrap 插件概览
即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发。所有公开的 API 都是支持单独或链式调用方式,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。注意:不要尝试同时引用这两个文件,因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。动词不定式事件提供了。原创 2023-07-23 12:08:46 · 384 阅读 · 0 评论 -
5.2 Bootstrap 过渡效果(Transition)插件
注意:如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持,并用来获取过渡效果。过渡效果(Transition)插件提供了简单的过渡效果。原创 2023-07-23 12:09:15 · 280 阅读 · 0 评论 -
5.3 Bootstrap 模态框(Modal)插件
注意:如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。正如上面实例所示,如果您点击了 关闭 按钮,即 hide 事件,则会显示一个警告消息。原创 2023-07-23 12:10:44 · 532 阅读 · 0 评论 -
5.4 Bootstrap 下拉菜单(Dropdown)插件
Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。原创 2023-07-23 12:13:17 · 848 阅读 · 0 评论 -
5.5 Bootstrap 滚动监听(Scrollspy)插件
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。您可以向顶部导航添加滚动监听行为:通过 data 属性:向您想要监听的元素(通常是 body)添加 data-sp原创 2023-07-24 22:10:38 · 373 阅读 · 0 评论 -
5.6 Bootstrap 标签页(Tab)插件
注意:如果您想要单独引用该插件的功能,那么您需要引用 tab.js。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。.$().tab:该方法可以激活标签页元素和内容容器。下面的实例演示了标签页(Tab)插件方法 .tab 的用法。下面的实例演示了标签页(Tab)插件事件的用法。原创 2023-07-24 22:12:02 · 2544 阅读 · 1 评论 -
5.7 Bootstrap 提示工具(Tooltip)插件
提示工具(Tooltip)插件是受 Jason Frame 写的jQuery.tipsy 的启发。注意:提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。下面的实例演示了通过 data 属性使用提示工具(Tooltip)插件的用法。下面的实例演示了提示工具(Tooltip)插件方法的用法。下面的实例演示了提示工具(Tooltip)插件事件的用法。原创 2023-07-24 22:15:00 · 810 阅读 · 0 评论