bootstrap学习（四）输入框、导航

骑猪看日落 2022-01-06 14:57 234阅读 0赞

### 输入框组： ###

#### 基本用法： ####

//form-control 占满  
    //input-group:输入框组
    //input-group-addon：输入框前加入一个前缀
    　　<div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">@</span>
        </div>

![1405399-20190413224514805-1613846895.png][]

#### 加入小图标： ####

![1405399-20190413224808130-294408162.png][]

#### 加入按钮： ####

![1405399-20190413225444609-1925294309.png][]

![1405399-20190413225645787-939059724.png][]

## 导航 ##

Bootstrap 中的导航组件都依赖同一个 `.nav` 类，状态类也是共用的。改变修饰类可以改变样式。

###  标签页： ###

li：标签内部是一个链接或按钮

<ul class="nav nav-tabs">{#选项卡nav-tabs  只写nav不行#}
            <li><a href="">111</a></li> 
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>

![1405399-20190413230804661-1179404956.png][]

###  胶囊标签页：nav-pills       active默认选中 ###

![1405399-20190413231251777-1208584957.png][]

### 竖胶囊：nav-stacked ###

![1405399-20190413231618142-1208207598.png][]

###  禁用的标签： .disable 不可选 ###

![1405399-20190413231420120-1284611414.png][]

###  自适应标签页：nav-justfified 标签页自动占满一行 ###

![1405399-20190413231738617-1030777794.png][]

###  二级导航：.caret 向下的箭头 ###

![1405399-20190413232446802-386041597.png][]

### 导航条： ###

#### 基础导航： navbar-brand：字体稍微大点     navbar-header：导航头信息 ####

![1405399-20190413233140810-1497557682.png][]

###  导航中加入表单： ###

![1405399-20190413233717469-1847011499.png][]

### 面包屑导航： ###

breadcrumb：面包屑样式

![1405399-20190413235026511-1177053766.png][]

###  分页导航：可以给li设置 .active设置激活状态 ###

![1405399-20190413235409967-2616539.png][]

![1405399-20190413235542176-1953305223.png][]

官方：[https://v3.bootcss.com/components/\#input-groups][https_v3.bootcss.com_components_input-groups]

转载于:https://www.cnblogs.com/nxzblogs/p/10703444.html

[1405399-20190413224514805-1613846895.png]: /images/20211227/db67b9a07dbb4a13871fed84a8037e15.png
[1405399-20190413224808130-294408162.png]: /images/20211227/c2f2cb4e121249ab9d12c2b5d553d407.png
[1405399-20190413225444609-1925294309.png]: /images/20211227/a538c8eec8054842bd4cf3a181012ba0.png
[1405399-20190413225645787-939059724.png]: /images/20211227/75f5ab65985441cb9a119c262f29fbcb.png
[1405399-20190413230804661-1179404956.png]: /images/20211227/7589cf2cd02a4c4e825fa4b26c39d766.png
[1405399-20190413231251777-1208584957.png]: /images/20211227/243b58e5ac584eb5bc8c93575782a51c.png
[1405399-20190413231618142-1208207598.png]: /images/20211227/0fd47893d18a48ed8cae97b97a946b0c.png
[1405399-20190413231420120-1284611414.png]: /images/20211227/5ecd330c94154f7e80b224207802d527.png
[1405399-20190413231738617-1030777794.png]: /images/20211227/ce920fa3e6924c45995c4530fc6b869c.png
[1405399-20190413232446802-386041597.png]: /images/20211227/b892a618bbd44fe898214fcf28879be2.png
[1405399-20190413233140810-1497557682.png]: /images/20211227/f7f6298d462c41f9943b432a53d45cf1.png
[1405399-20190413233717469-1847011499.png]: /images/20211227/f00dd0da67ab441ca8ccc9fd8c58e02f.png
[1405399-20190413235026511-1177053766.png]: /images/20211227/8dbf97465b344e9fa2c14ecc5f6605a6.png
[1405399-20190413235409967-2616539.png]: /images/20211227/69390c8ab2e2441b90ae957778ea19dd.png
[1405399-20190413235542176-1953305223.png]: /images/20211227/58b437ac41554d54a1cfff27b3d7c8e2.png
[https_v3.bootcss.com_components_input-groups]: https://v3.bootcss.com/components/#input-groups