Bootrasp入门基础（五）

最新推荐文章于 2021-08-20 18:37:18 发布

tammy1151

最新推荐文章于 2021-08-20 18:37:18 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap入门基础布局组件导航

本文链接：https://blog.csdn.net/tammy1151/article/details/52230208

版权

Bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

布局组件(一)

1，字体图标

含有字体图标两百多个，参看http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

用法：

一个相应的class就是一个图标

<span class="glyphicon glyphicon-search"></span>

2，下拉菜单

用法：在class.dropdown 内加下拉菜单即可

对齐：在.dropdown-menu添加.pull-right(left)表示向右或左对齐

在下拉菜单便签区加标题 .dropdown-header

3,按钮组

一组按钮水平排列 .btn-group

垂直按钮 .btn-group-vertical

4,按钮下拉菜单

下三角<span class="caret"></span>可以用来指示下拉菜单

下拉菜单.dropdown(默认) 上拉菜单 .droup

5，导航菜单

标签式的导航菜单：

以一个带有 class .nav 的无序列表开始。
添加标签式： class .nav-tabs
胶囊式导航：class.nav-pills

垂直：class.nav-stacked

两端对齐：class.nav-justified

6,导航栏

默认导航：
- 向 <nav> 标签添加 class .navbar、.navbar-default。
- 向上面的元素添加 role="navigation"，有助于增加可访问性。
- 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
- 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表
响应式导航栏：

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素
```
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li ></li>
... ...
```
导航栏的表单 .navbar-form
导航栏的按钮：用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。 .navbar-btn 可被使用在 <a> 和 <input> 元素上。

注意：不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的button class

导航栏固定在顶部 .navbar-fixed-top

静态的顶部 (随着页面一起滚动) .navbar-static-top

倒置的导航栏（黑色背景白色文本）.navbar-inverse

注：为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置

面包屑导航 .breadcrumb

tammy1151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootrasp入门基础（五）

布局组件(一)1，字体图标含有字体图标两百多个，参看http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm用法：一个相应的class就是一个图标 class="glyphicon glyphicon-search">2，下拉菜单用法：在class.dropdown 内加下拉菜单即可对
复制链接

扫一扫

专栏目录