前端基础之《Bootstrap（7）—CSS组件_输入框组和导航》

一、输入框组

1、输入框组（.input-group）

2、为input添加额外元素（.input-group-addon）

3、input-group大尺寸（.input-group-lg）

4、input-group小尺寸（.input-group-sm）

5、为输入框组添加按钮（.input-group-btn）

<form action="">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button class="btn btn-danger">GO</button>
        </div>
    </div>
    
</form>

二、导航

1、标签页式导航（.nav .nav-tabs）

2、激活状态（.active）

3、p标签有个样式（.lead）

<ul class="nav nav-tabs">
    <li class="active">
        <a href="">百度</a>
    </li>
    <li class="">
        <a href="">新浪</a>
    </li>
    <li class="">
        <a href="">网易</a>
    </li>
</ul>

<div class="row">
    <p class="lead">百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度百度</p>
</div>
<div class="row">
    <p class="lead">新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪新浪</p>
</div>
<div class="row">
    <p class="lead">网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易网易</p>
</div>

4、胶囊式导航（.nav .nav-pills）

5、胶囊式导航堆叠（.nav .nav-pills .nav-stacked）

<ul class="nav nav-pills nav-stacked">
    <li class="active">
        <a href="">百度</a>
    </li>
    <li class="">
        <a href="">新浪</a>
    </li>
    <li class="">
        <a href="">网易</a>
    </li>
</ul>