Bootstrap常用的布局组件和插件(二)

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参考手册

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页