Bootstrap导航

导航元素

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


垂直胶囊式导航


Bootstrap导航_第1张图片

俩端对其式禁用导航



Bootstrap导航_第2张图片

带有下拉菜单的标签

 
描述
.nav nav-tabs 标签页
.nav nav-pills 胶囊式标签页
.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的
.nav-justified 两端对齐的标签页,在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。
.disabled 禁用的标签页
Bootstrap导航_第3张图片
描述
.nav nav-tabs 标签页
.nav nav-pills 胶囊式标签页
.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的
.nav-justified 两端对齐的标签页,在大于 768px 的屏幕上,通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。
.disabled 禁用的标签页

提示: 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。

首页

首页,这里显示首页内容

Bootstrap导航_第4张图片

导航栏


响应式导航栏


Bootstrap导航_第5张图片

导航栏中的表单


导航栏中的文本



导航栏图标链接



对齐方式


描述
.navbar-fixed-top 导航栏固定在页面的顶部
.navbar-fixed-bottom 导航栏固定在页面的底部
.navbar-static-top 随着页面一起滚动的导航栏
.navbar-inverse 带有黑色背景白色文本的反色的导航栏
描述
.navbar-fixed-top 导航栏固定在页面的顶部
.navbar-fixed-bottom 导航栏固定在页面的底部
.navbar-static-top 随着页面一起滚动的导航栏
.navbar-inverse 带有黑色背景白色文本的反色的导航栏

面包屑导航

面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回
适用范围:

  • 层级较深的网站
  • 独立不交叉的网站

Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

输入框组

  • 把前缀或后缀元素放在一个带有 class .input-group 的
    中。
  • 接着,在相同的
    内,在 class 为 .input-group-addon 的 内放置额外的内容。
  • 把该 放置在 元素的前面或者后面
    基本输入框组
        
@

@

@

Bootstrap导航_第6张图片

复选框和单选插件

   

Bootstrap导航_第7张图片

按钮插件

你可能感兴趣的:(Bootstrap导航)