导航组件和导航条组件

**

导航组件

**
一般用于做页面里的选项卡等效果(导航有个基础类nav 这个是必须写的基础类)
1,标签页效果(选项卡效果)
导航组件和导航条组件_第1张图片
nav nav-tabs
active
导航组件和导航条组件_第2张图片

2,胶囊效果
导航组件和导航条组件_第3张图片
nav nav-pills
胶囊式也可以竖着排列 添加nav-stacked就可以了


导航组件和导航条组件_第4张图片

两种形式如何让他们两边对齐,选项均分呢?
导航组件和导航条组件_第5张图片



就是在每一种类后面添加 nav-justified 这个类就可以实现均分效果

**

导航条组件(网上最上面或者最下面的导航)

**
导航组件和导航条组件_第6张图片


如何在导航中使用表单(比如导航条里面的搜索框)

导航组件和导航条组件_第7张图片
导航组件和导航条组件_第8张图片
navbar-form 让输入框适应导航条
navbar-left 让输入框左对齐
对齐方式改变
导航组件和导航条组件_第9张图片
导航组件和导航条组件_第10张图片
navbar-right 让搜索框右对齐

**

在导航条内添加按钮

**
在这里插入图片描述
导航组件和导航条组件_第11张图片


**

把导航条固定在顶部

**
导航组件和导航条组件_第12张图片


你可能感兴趣的:(导航组件和导航条组件)