随笔分类 - Bootstrap历练讲解
目前最受欢迎的前端框架
摘要：当您想要描述一个链接的时候，使用提示工具插件是一个不错的选择。Bootstrap提示工具插件做了很多的改进，例如不需要依赖图像，而是改变Css动画效果，用data属性来存储标题信息。用法提示工具(Tooltip)插件根据要求生成内容和标记，默认情况是把提示工具放在它们触发元素的后面，您可以有以下两种...
阅读全文
摘要：事件下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。事件描述实例show.bs.tab该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。$('a[dat...
阅读全文
摘要：标签页(Tab)在Bootstrap导航元素一章中简介过，通过结合一些data属性，您可以轻松地创建一些标签页界面。通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中。用法您可以通过以下两个方式来启用标签页1、通过data属性：您需要添加data-toggle="tab"或da...
阅读全文
摘要：使用下拉菜单的插件，您可以向任何组件(比如：导航栏，标签页，胶囊式导航，按钮)添加下拉菜单用法您可以切换下拉菜单(dropdown)插件隐藏内容1、通过data属性，向链接或按钮添加data-toggle="dropdown"来切换下拉菜单。 下拉菜单触发器 ...
阅读全文
摘要：模态框(Modal)是覆盖在父窗体上的子窗体。通常，其目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下进行一些交互，子窗体提供一些交互或信息。 Bootstrap历练实例：模态框(Modal)插件 创建模态框(Modal) 开始演示模态框 ...
阅读全文
摘要：Bootstrap多媒体对象（Media Object）本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混...
阅读全文
摘要：向列表组添加自定义内容我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点： Bootstrap历练实例：向列表组添加内容 Html5 Css3Css3是html5前端必学的技术 ...
阅读全文
摘要：向列表组添加链接通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 代替 元素。下面的实例演示了这点： Bootstrap历练实例：向列表组添加链接 Html5 Css3 ...
阅读全文
摘要：向列表组添加徽章我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 元素中添加即可。下面的实例演示了这点： Bootstrap历练实例：带徽章的列表组 Html5 Css3 ...
阅读全文
摘要：Bootstrap列表组本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：向元素 添加 class.list-group。向 添加 class.list-group-item。下面的实例演示了这点： Bootstrap历练实例：默认的列表...
阅读全文
摘要：带列表组的面板我们可以在任何面板中包含列表组，通过在 元素中添加.panel和.panel-default类来创建面板，并在面板中添加列表组。您可以从列表组一章中学习如何创建列表组。 Bootstrap历练实例：带列表组的面板 ...
阅读全文
摘要：带语境色彩的面板使用语境状态类panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板，实例如下： Bootstrap历练实例：语境色彩的面板 ...
阅读全文
摘要：带表格的面板为了在面板中创建一个无边框的表格，我们可以在面板中使用 class.table。假设有个 包含.panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含.panel-body的 ，则组件会无中断地从面板头部移动到表格。下面的实例演示了这点： Bootstra...
阅读全文
摘要：面板脚注我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class.panel-footer的 中即可。下面的实例演示了这点： bootstrap历练实例：面板脚注 面板的标题 ...
阅读全文
摘要：面板标题我们可以通过以下两种方式来添加面板标题：使用.panel-headingclass 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.使用带有.panel-titleclass 的 - 来添加预定义样式的标题。下面...
阅读全文
摘要：Bootstrap面板（Panels）本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 元素添加 class.panel和 class.panel-default即可，如下面的实例所示： Bootstrap历练实...
阅读全文
摘要：Well 是一种会引起内容凹陷显示或插图效果的容器 。为了创建 Well，只需要简单地把内容放在带有 class.well的 中即可。下面的实例演示了一个默认的 Well： Bootstrap历练实例：默认的Well Hello、...
阅读全文
摘要：本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用警告（Alerts） jQuery 插件...
阅读全文
摘要：本章将讲解Bootstrap缩略图，大多数站点都需要要在网格中布局图像，视频，文本。Bootstrap通过缩略图为此提供了一些简便的方法，使用Bootstrap创建缩略图的步骤如下：1、在图像的周围添加带class.thumbnail类的标签。2、这会添加四个像素的内边距和一个灰色的边框。3、当鼠标...
阅读全文
摘要：Bootstrap页面标题(PageHeader)是个不错功能，它会网页的标题的四周添加适当的间距，当一个网页中有多个标题并且每个标题之间需要添加一定适当的间距，使用页面标题是非常有用的。如果需要使用页面标题，你把标题放到一个class.pageheader类的div中。实例： ...
阅读全文