bootstrap知识简介

2016-10-12  本文已影响0人  一直以来都很好

输入框组的大小  您可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小。输入框中的内容会自动调整大小。 复选框和单选插件  您可以把复选框和单选插件作为输入框组的前缀或者后缀元素,如下面的实例所示:

按钮插件  您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class,您需要使用 class .input-group-btn 来包裹按钮。这是必需的,因为默认的浏览器样式不会被重写

Go!

带有下拉菜单的按钮

下拉菜单

功能

另一个功能

其他

分离的链接

Bootstrap 导航元素--它们使用相同的标记和基类 .nav。 表格导航或标签  创建一个标签式的导航菜单:  •以一个带有 class .nav 的无序列表开始。  •添加 class .nav-tabs。

胶囊式的导航菜单  基本的胶囊式导航菜单  如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可,

垂直的胶囊式导航菜单  您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked,让胶囊垂直堆叠。

两端对齐的导航  您可以在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified,让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。

禁用链接  对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态  注意:该 class 只会改变的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接  $(function(){$("a").bind("click",function(){return false;});}); 导航下拉菜单  带有下拉菜单的标签  向标签添加下拉菜单的步骤如下:  •以一个带有 class .nav 的无序列表开始。  •添加 class .nav-tabs。  •添加带有 .dropdown-menu class 的无序列表。

Java

Swing

jMeter

EJB

分离的链接

Bootstrap 导航栏W3Cschool

iOS

SVN

Java

jmeter

EJB

Jasper Report

分离的链接

另一个分离的链接响应式的导航栏    为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的创建所谓的汉堡按钮。这些会切换为 .nav-collapse

中的元素。为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。 导航栏中的表单  导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里 导航栏中的按钮    您可以使用 class .navbar-btn 向不在

中的元素添加按钮,按钮在导航栏上垂直居中。.navbar-btn 可被使用在和元素上。  不要在 .navbar-nav 内的元素上使用 .navbar-btn,因为它不是标准的 button class。 导航栏中的文本    如果需要在导航中包含文本字符串,请使用 class .navbar-text。这通常与

标签一起使用,确保适当的前导和颜色 非导航链接    如果您不想在常规的导航栏导航组件内使用标准的链接,那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色 组件对齐方式    您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动 固定到顶部  Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为随着页面一起滚动的静态导航栏。    如果您想要让导航栏固定在页面的顶部,请向 .navbar class 添加 class .navbar-fixed-top。  为了防止导航栏与页面主体中的其他内容的顶部相交错,请向  标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。 固定到底部    如果您想要让导航栏固定在页面的底部,请向 .navbar class 添加 class .navbar-fixed-bottom 静态的顶部    如需创建能随着页面一起滚动的导航栏,请添加 .navbar-static-top class。该 class 不要求向  添加内边距(padding)。 倒置的导航栏    为了创建一个带有黑色背景白色文本的倒置的导航栏,只需要简单地向 .navbar class 添加 .navbar-inverse class 即可,如下面的实例所示:    为了防止导航栏与页面主体中的其他内容的顶部相交错,请向  标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。

上一篇下一篇

猜你喜欢

热点阅读