Bootstrap下拉菜单（Dropdown）插件Bootstrap下拉菜单这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用dropdown.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法您可以切换下拉菜单（Dropdown）插件的隐藏内容：通过data属性：向链接或按钮添加data-toggle="dropdown"

Bootstrap下拉菜单（Dropdown）插件Bootstrap下拉菜单这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用dropdown.js。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。用法您可以切换下拉菜单（Dropdown）插件的隐藏内容：通过data属性：向链接或按钮添加data-toggle="dropdown"

Bootstrap创建一个网页接下来我们通过Bootstrap3来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htmHTML代码divclass="jumbotrontext-center"style="margin-bottom:0">h1>我的第一个Bootstrap页面h1>p>重置浏览器窗口大小查看效果！p>div>navclass="navbarnavbar-inverse">divclass="container-fluid">divclass="

Bootstrap创建一个网页接下来我们通过Bootstrap3来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htmHTML代码divclass="jumbotrontext-center"style="margin-bottom:0">h1>我的第一个Bootstrap页面h1>p>重置浏览器窗口大小查看效果！p>div>navclass="navbarnavbar-inverse">divclass="container-fluid">divclass="

Bootstrap面板（Panels）本章将讲解Bootstrap面板（Panels）。面板组件用于把DOM组件插入到一个盒子中。创建一个基本的面板，只需要向元素添加class.panel和class.panel-default即可，如下面的实例所示：实例divclass="panelpanel-default">divclass="panel-body">这是一个基本的面板div>div>尝试一下»结果如下所示： 面板标题我们可以通过以下两种方式来添加面板标题： 使用.panel-headingclass可以很简单地向面板添加标题容器。 使用带有.panel-titleclass的-来添加预

Bootstrap面板（Panels）本章将讲解Bootstrap面板（Panels）。面板组件用于把DOM组件插入到一个盒子中。创建一个基本的面板，只需要向元素添加class.panel和class.panel-default即可，如下面的实例所示：实例divclass="panelpanel-default">divclass="panel-body">这是一个基本的面板div>div>尝试一下»结果如下所示： 面板标题我们可以通过以下两种方式来添加面板标题： 使用.panel-headingclass可以很简单地向面板添加标题容器。 使用带有.panel-titleclass的-来添加预

Bootstrap页面标题（PageHeader）页面标题（PageHeader）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（PageHeader），请把您的标题放置在带有class.page-header的中：实例divclass="page-header">h1>页面标题实例small>子标题small>h1>div>p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。p>尝试一下»结果如下所示：

Bootstrap页面标题（PageHeader）页面标题（PageHeader）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（PageHeader），请把您的标题放置在带有class.page-header的中：实例divclass="page-header">h1>页面标题实例small>子标题small>h1>div>p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。p>尝试一下»结果如下所示：

Bootstrap超大屏幕（Jumbotron）本章将讲解Bootstrap支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：创建一个带有class.jumbotron.的容器。除了更大的，字体粗细font-weight被减为200。下面的实例演示了这点：实例divclass="container">divclass="jumbotron">h1>欢迎登陆页面！h1>p>这是一个超大屏幕（Jumbotron）的实例。p>p>aclass="btnbtn-primar

Bootstrap超大屏幕（Jumbotron）本章将讲解Bootstrap支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：创建一个带有class.jumbotron.的容器。除了更大的，字体粗细font-weight被减为200。下面的实例演示了这点：实例divclass="container">divclass="jumbotron">h1>欢迎登陆页面！h1>p>这是一个超大屏幕（Jumbotron）的实例。p>p>aclass="btnbtn-primar