讲解一个个插件并附源码实例
虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。基本实例默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div></div>带标题的面版通过 .
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1></div>
这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。<div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>
Bootstrap 4 前端组件库教程
基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。 <table class="table"> ... </table>条纹状表格通过 .
内联代码通过 <code>标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline.用户输入通过 <kbd> 标签标记用户通过键盘输入的内容。= To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <
标题HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5.
深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。HTML5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 <!DOCTYPE html> <html lang="zh-CN"> ... </html>
Bootstrap 遵循统一的 web 标准，另外，通过做一些少量的修改，还可以让使用 辅助设备（AT - ASSISTIVE TECHNOLOGY）上网的人群访问你的站点。
Bootstrap 有成熟、强大的社区。如果你希望随时获取 Bootstrap 的最新消息，请关注以下社区资源。阅读并订阅 Bootstrap 官方博客。通过 IRC （irc.freenode.net 服务器）与其他 Bootstrap 粉丝交流，我们在 ##bootstrap 频道。如果使用 Bootstrap 过程中遇到问题，请在 StackOverflow 上交流。请搜索 twitter-bootstrap-3 关键词。
BootlintBootlint 是 Bootstrap 官方所支持的 HTML 检测工具。在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。
Bootstrap （当前版本 v3.3.5）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。用于生产环境的 Bootstrap编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。Bootstrap 源码Less、JavaScript 和 字体文件的源码，并且带有文档。
下面就是一个轮播组件的案例。代码：<body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <
对为支持折叠功能的组件，例如 accordions 和导航，赋予基本样式和灵活的支持。插件依赖折叠插件依赖过渡效果插件。案例使用折叠插件，通过扩展 panel 组件从而构建了一个简单的 accordion 组件。先来看一下效果。接下来看一下代码的实现。<div class="container" style="margin-top:140px;"> <div class="panel-group" id="accordion">
按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。状态通过添加 data-loading-text=" 正在加载..."可以使按钮呈现加载状态。<button type="button" id="fat-btn" data-loading-text="正在加载..." class="btn btn-primary"> Loading state </button>不过如果想启用加载的状态，还需要在点击按钮的时候进行手动启动。
案例通过这个插件可以为所有警告框增加关闭功能。 <div id="alert1" class="alert alert-warning fade in"> <button id='alert1' type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. <
案例为页面内容添加一个小的覆盖层，就像 iPad 上的效果一样，为页面元素增加额外的信息。先来看几个简单的静态案例效果图效果比较简单主要就是静态的弹出的小窗体，分为窗体标题和窗体内容。<div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"></div> <
受到 Jason Frame 开发的 jQuery.tipsy 插件的启发，Bootstrap 才把这个工具提示插件做的更好，而且此插件不依赖图片，只是使用 CSS3 来实现动画效果，并使用 data 属性存储标题。将鼠标悬停在按钮、文本框、链接等等一些基本控件上就可以看到提示了，先上一个效果图主要实现了按钮的上下左右的 ToolTip，然后是文本框和链接的 ToolTip。<
之前通过组件只是简单的学习过这样的。<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li></ul>当然效果就是这样，只是默认的激活了第一个标签 Home，然后不能点击。
关注时代Java
