Bootstrap 导航栏 |
您所在的位置:网站首页 › bootstrap的导航栏 › Bootstrap 导航栏 |
Bootstrap 导航栏
❮ 上一节
下一节 ❯
导航栏
导航栏一般放在页面的顶部: 使用 Bootstrap,导航栏可以扩展或折叠,具体取决于屏幕大小。 使用 创建标准导航栏。 以下示例显示了如何在页面顶部添加导航栏: 实例 WebSiteName Home Page 1 Page 2 Page 3 ... 亲自试一试 »注释: 本页上的所有示例都会显示一个导航栏,它在小屏幕上占用了太多空间(然而,在大屏幕上,导航栏将位于一行上,因为 Bootstrap 是响应式的)。这个问题(小屏幕)将在本页最后一个示例中解决。 反向导航栏如果您不喜欢默认导航栏的样式,Bootstrap 会提供一个可选的黑色导航栏: J只需将 .navbar-default 类更改为 .navbar-inverse: 实例 WebSiteName Home Page 1 Page 2 Page 3 亲自试一试 » 导航栏使用下拉菜单导航栏上可以设置下拉菜单。 以下示例为 "Page 1" 按钮添加了下拉菜单: 实例 WebSiteName Home Page 1 Page 1-1 Page 1-2 Page 1-3 Page 2 Page 3 亲自试一试 » 右对齐导航栏.navbar-right 类用于右对齐导航栏按钮 在下面的示例中,我们在导航栏的右侧插入一个 "Sign Up" 按钮和一个 "Login" 按钮。我们还在两个按钮中的添加一个字形图标: 实例 WebSiteName Home Page 1 Page 2 Sign Up Login 亲自试一试 » 导航栏按钮要在导航栏中添加按钮,请在 Bootstrap 按钮上添加 .navbar-btn 类: 实例 WebSiteName Home Link Link Button 亲自试一试 » 导航栏表单要在导航栏中添加表单元素,请将 .navbar-form 类添加到表单元素并添加输入。 注意,我们已经向保存输入的 div 容器添加了一个 .form-group 类。如果您有多个输入,这会添加适当的填充(您将在表单一章了解更多信息)。 实例 WebSiteName Home Page 1 Page 2 Submit 亲自试一试 »您还可以使用 .input-group 和 .input-group-addon 类在输入字段旁边附加图标或帮助文本。在 Bootstrap Inputs 一章中,您将了解有关这些类的更多信息。 实例 亲自试一试 » 导航栏文本使用 .navbar-text 类来设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样。 实例 Link Link 亲自试一试 » 固定导航栏导航栏可以固定在头部或者底部。 固定导航栏在固定位置(顶部或底部)保持可见,与页面滚动无关。 使用 .navbar-fixed-top 类来实现导航栏的固定在顶部: 实例 WebSiteName Home Page 1 Page 2 Page 3 亲自试一试 »使用 .navbar-fixed-bottom 类用于设置导航栏固定在底部: 实例 WebSiteName Home Page 1 Page 2 Page 3 亲自试一试 » 折叠导航栏导航栏通常会在小屏幕上占据太多空间。 我们应该隐藏导航栏;只在需要的时候才展示。 在下面的示例中,导航栏被右上角的一个按钮替换。只有单击按钮时,才会显示导航栏: 实例 WebSiteName Home Page 1 Page 2 Page 3 Sign Up Login 亲自试一试 » ❮ 上一节 下一节 ❯ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |