输入框组的大小 您可以通过向 .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 的无序列表。
Bootstrap 导航栏W3Cschool
另一个分离的链接响应式的导航栏 为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 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），内边距的值可以根据您的需要进行设置。
网友评论