【Bootstrap学习笔记】4.输入框和导航组件、路径分页标签和徽章组件

八、输入框和导航组件

学习内容

• 输入框组件
• 导航组件
• 导航条组件
• 导航条组件中使用表单
• 导航条组件中使用按钮
• 导航条组件中使用文本

● 输入框组件

在input元素前后加上文字或按钮，以实现对表单控件的扩展。
1.前(后)缀元素和输入框都需要放在class为.input-group的容器中
2.给前(后)缀元素增加样式.input-group-addon
3.可以将checkbox和radio作为前(后)缀元素，直接放在class为.input-group-addon的<span>内即可
4.可以将按钮作为前(后)缀元素，这时不是添加.input-group-addonclass，而是使用class.input-group-btn来包裹。这是必需的，因为默认的浏览器样式不会被重写。
5.可以将下拉菜单作为前(后)缀元素，将原本的容器class.dropdown替换成.input-group-btn即可
6..input-group-lg、.input-group-sm、.input-group-xs可改变输入框组的大小，输入框中的内容会自动调整大小。
注：为了保持跨浏览器的兼容性，请避免使用<select>元素，因为它们在WebKit浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

.input-group-addon

<div class="input-group">
    <a href="#" class="input-group-addon">@</a>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

<br>

<!--checkbox和radio可直接放在span内-->
<div class="input-group">
    <span class="input-group-addon"><input type="checkbox"></span>
    <input type="text" class="form-control">
</div>

<br>   

<div class="input-group">
    <span class="input-group-addon"><input type="radio"></span>
    <input type="text" class="form-control">
</div> 

.input-group-btn

<!--将按钮作为前(后)缀元素-->
<div class="input-group">
    <span class="input-group-btn"><button class="btn btn-default btn-info">搜索</button></span>
    <input type="text" class="form-control">
</div>

<!--将下拉菜单作为前(后)缀元素-->         
<div class="input-group">
  <span class="input-group-addon">%</span>
   <input type="text" class="form-control">
   <div class="dropdown">
       <button class="btn btn-default" data-toggle="dropdown">提交
       <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
           <li><a href="#">首页</a></li>
           <li><a href="#">科技</a></li>
           <li class="divider"></li>
           <li><a href="#">关于</a></li>
       </ul>
   </div>
</div>

<br>

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <!--区别在这里-->
    <!--将原本的.dropdown换成.input-group-btn-->
    <div class="input-group-btn">
        <button class="btn btn-default" data-toggle="dropdown">提交
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li class="divider"></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</div>

● 导航组件

1..nav .nav-tabs 基本标签式导航
2..nav .nav-pills 基本胶囊式导航
3..nav .nav-pills .nav-stacked 胶囊垂直式导航
4..nav .nav-* .nav-justified 在屏幕宽度大于768px时两端对齐，小于768px时堆叠
5.给导航增加一个下拉菜单：给其中一个li设置class.dropdown，其它同dropdown的设置(一个触发元素，一个下拉列表，触发元素用<a>标签效果最好)

<!--标签式导航-->
<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">关于</a></li>
</ul>

<br>

<!--胶囊式导航-->
<ul class="nav nav-pills">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">关于</a></li>
</ul>

<br>
<!--胶囊式垂直导航-->
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">关于</a></li>
</ul> 

<br>
<!--两端对齐导航，标签式和胶囊式都可以-->        
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">关于</a></li>
</ul>   

<br>
<!--导航中加入下拉菜单-->
<ul class="nav nav-pills">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">资讯</a></li>
    <li class="dropdown">
        <a data-toggle="dropdown">
           a下拉菜单
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li class="dropdown-header">english</li>
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
            <li><a href="#">d</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <span data-toggle="dropdown">
            span下拉菜单
            <span class="caret"></span>
        </span>
        <ul class="dropdown-menu">
            <li class="dropdown-header">english</li>
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
            <li><a href="#">d</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown">
            button下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">english</li>
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
            <li><a href="#">d</a></li>
        </ul>
    </li>
    <li><a href="#">关于</a></li>
</ul>    

扩展
1..tab-content
2..tab-pane

● 导航条(栏)组件

1.以<nav>标签作为容器，以class.navbar标识，以class.navbar-default给与默认样式
2..navbar-default为默认样式，.navbar-inverse为反色样式
3.建议在<nav>内使用div.container约束左右间距
4.标题区域：向<div>元素添加一个标题 class.navbar-header，内部包含了带有 class.navbar-brand的<a>元素。这会让文本看起来更大一号。
5.给导航栏添加链接，添加带有class.nav .navbar-nav的无序列表即可

<nav class="navbar navbar-default">
    <div class="container">
       <div class="navbar-header">
           <a href="#" class="navbar-brand">BRAND</a>
           <a href="#" class="navbar-brand">BRAND2</a>   
       </div>
       <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">关于</a></li>
       </ul>
    </div>
</nav>

导航条组件中使用表单

给form增加class.navbar-form
用class.navbar-left或.navbar-right来控制对齐方式

<nav class="navbar navbar-default">
    <div class="container">
       <div class="navbar-header">
           <a href="#" class="navbar-brand">BRAND</a>
           <a href="#" class="navbar-brand">BRAND2</a>   
       </div>
       <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">关于</a></li>
       </ul>

       <form action="" class="navbar-form navbar-right">
           <div class="input-group">
               <input class="form-control" type="text">
               <div class="input-group-btn">
                   <button class="btn btn-default">提交</button>
               </div>
           </div>
       </form>

    </div>
</nav>
<br>   
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">BRAND</a>
            <a href="#" class="navbar-brand">BRAND1</a>
        </div>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">关于</a></li>
        </ul>
<!--给form增加样式.navbar-form
 给form增加样式.navbar-left or .navbar-right控制对齐方式-->
        <form action="" class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">    
                    <button class="btn btn-default">提交</button>
                </div>
            </div>
        </form>
    </div>
</nav>

导航条组件中使用按钮

给button增加样式.navbar-btn

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">
                BRAND
            </a>
            <a href="#" class="navbar-brand">
                BRAND1
            </a>

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">关于</a></li>
            </ul>
            <!--给按钮增加样式.navbar-btn-->
            <button class="btn btn-default navbar-btn">我是按钮</button>
        </div>
    </div>
</nav>

导航条组件中使用文本和非导航超链接

<!--文本-->
<p class="navbar-text">我是一段文本</p>
<!--非导航超链接，单独使用，没有浮动效果-->
<a href="#" class="navbar-link">非导航超链接</a>
<!--非导航超链接，和文本配合使用，可对齐-->
<p class="navbar-text"><a href="#" class="navbar-link">非导航超链接p</a></p>

导航条组件的固定

.navbar-fixed-top 顶部固定
.navbar-fixed-bottom 底部固定
.navbar-static-top 静态固定，和页面等宽的导航条，去掉了圆角。.navbar-static-bottom无定义

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">
                BRAND
            </a>
            <a href="#" class="navbar-brand">
                BRAND1
            </a>

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">关于</a></li>
            </ul>
            <!--给按钮增加样式.navbar-btn-->
            <button class="btn btn-default navbar-btn navbar-left">我是按钮</button>

            <p class="navbar-text">我是一段文本</p>
            <a href="#" class="navbar-link">非导航超链接</a>
            <p class="navbar-text"><a href="#" class="navbar-link">非导航超链接p</a></p>
        </div>
    </div>
</nav>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>

补充：响应式导航栏

说明：为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有class.collapse、.navbar-collapse的div中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 span创建所谓的汉堡按钮。这些会切换为 .nav-collapse div 中的元素。为了实现以上这些功能，您必须包含 Bootstrap折叠（Collapse）插件。

步骤：

1.将所有要折叠的内容包含在class为.collapse .navbar-collapse的div里，比如ul，并且给这个div一个id，比如”aa”
2.在.navbar-header下增加一个按钮，增加class.navbar-toggle，增加元素data-toggle="collapse"，增加元素data-target="#id"
3.button增加三个span.icon-bar，来创建所谓的汉堡按钮

<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
           <button class="navbar-toggle" data-toggle="collapse" data-target="#aa">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>

            <a href="#" class="navbar-brand">导航条组件</a>
        </div>
        <div class="collapse navbar-collapse navbar-left" id="aa">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        <!--form如果不需要折叠，需要给上面的div增加.navbar-left样式-->
        <form action="" class="navbar-form">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                <button class="btn btn-default">提交
                </button></div>
            </div>
        </form>
    </div>
</nav>

九、路径分页标签和徽章组件

学习内容

• 路径组件
• 分页组件
• 翻页效果(上一页\下一页)
• 标签组件
• 徽章组件
• 胶囊导航中的**状态
• 列表导航中的**状态

● 路径组件(也叫面包屑导航)

.breadcrumb

<ol class="breadcrumb">
    <li><a href="#">网站首页</a></li>
    <li><a href="#">列表页</a></li>
    <li class="active">海贼王手办2018pop白胡子爱德华纽盖特</li>
</ol>

●分页组件

.pagination
« »

<ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <!--选中-->
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <!--禁用-->
        <li class="disabled"><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    <br>
    <!--lg-->
    <ul class="pagination pagination-lg">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="disabled"><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    <br>
    <!--sm-->
    <ul class="pagination pagination-sm">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="disabled"><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>

翻页效果(上一页\下一页)

.pager 默认居中
.previous .next 左右两端
← → 左右箭头

<ul class="pager">
   <li><a href="#">上一页</a></li>
   <li><a href="#">下一页</a></li>
</ul>

<ul class="pager">
    <li class="previous"><a href="#">&larr; 上一页</a></li>
    <li class="next"><a href="#">下一页 &rarr;</a></li>
</ul>

●标签组件

1.标签可用于计数、提示或页面上其他的标记显示。使用class.label 来显示标签
2.可使用修饰的class.label-default、.label-primary、.label-success、.label-info、.label-warning、.label-danger

<h3>这是一个标签 <span class="label label-default">NEW</span></h3>
<h3>这是一个标签 <span class="label label-primary">NEW</span></h3>
<h3>这是一个标签 <span class="label label-success">NEW</span></h3>
<h3>这是一个标签 <span class="label label-info">NEW</span></h3>
<h3>这是一个标签 <span class="label label-warning">NEW</span></h3>
<h3>这是一个标签 <span class="label label-danger">NEW</span></h3>

●徽章组件

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。主要用于突出显示新的或未读的项。

.badge

<h4>这是一个标签 <span class="label label-default">NEW</span></h4>

<a href="#">未读 <span class="badge">3</span></a>

<button class="btn btn-default">
   未读 
   <span class="badge">3</span>
</button>

<button class="btn btn-default btn-warning">
    未读
    <span class="badge">3</span>
</button>

胶囊导航中的**状态 和 列表导航中的**状态

<ul class="nav nav-pills">
    <li><a href="#">邮箱首页</a></li>
    <li><a href="#">
        未读邮件
        <span class="badge">3</span>
        </a>
    </li>
    <li class="active"><a href="#">
         垃圾箱
         <span class="badge">5</span>   
        </a>
    </li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked" style="max-width:300px">
    <li><a href="#">邮箱首页</a></li>
    <li class="active"><a href="#">收件箱
        <span class="badge pull-right">5</span>
    </a></li>
    <li><a href="#">垃圾箱
        <span class="badge pull-right">10</span>
    </a></li>
</ul>