Bootstrap常用的布局组件和插件（二）

最新推荐文章于 2024-06-24 09:41:50 发布

「已注销」

最新推荐文章于 2024-06-24 09:41:50 发布

阅读量308

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_38482933/article/details/107700202

版权

1.Bootstrap 超大屏幕（Jumbotron）
超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
创建一个带有 class .jumbotron. 的容器div
实例
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class

<!DOCTYPE html><html>
<head>
	 <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
	<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	 <script src="/scripts/jquery.min.js"></script>
	 <script src="/bootstrap/js/bootstrap.min.js"></script>
	</head>
<body>
	<div class="jumbotron">
		 <div class="container">
			<h1>欢迎登陆页面！</h1>
			<p>这是一个超大屏幕（Jumbotron）的实例。</p>
			<p><a class="btn btn-primary btn-lg" role="button">学习更多</a></p>
		</div>
	</div>

</body>
</html>

2.Bootstrap 导航栏
导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

（1）默认的导航栏
创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
（2）响应式的导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件

3.Bootstrap 分页
分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
4.Bootstrap 下拉菜单（Dropdowns）
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown） JavaScript 插件的互动来实现。
如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。
您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。
5.Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
用法：
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框： 1.$(’#identifier’).modal(options)
6.Bootstrap 轮播（Carousel）
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
用法：
通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to=“2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放。
7.Bootstrap 面板（Panels）
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向

元素添加 class .panel 和 class .panel-default 即可
8.Bootstrap 弹出框（Popover）
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。
用法:
弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：
通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=“popover” 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

实例
<a href="#" data-toggle="popover" title="Example popover">
 	请悬停在我的上面
</a>
//通过 JavaScript：通过 JavaScript 启用弹出框（popover）： 
$('#identifier').popover(options)

查看组件详情用法，请下载对应版本Bootstrap参考手册