第二百三十八节，Bootstrap输入框和导航组件

Bootstrap输入框和导航组件

学习要点：

　　1.输入框组件

　　2.导航组件

　　3.导航条组件

本节课我们主要学习一下Bootstrap的两个个组件功能：输入框组件和导航导航条组件。

一．输入框组件

文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩展。

在左侧添加文字

input-group-addon样式class类，写在input同级的span里，给输入框添加一个片段(Bootstrap)
input-group样式class类，写在input外层div里，将输入框和片段整合(Bootstrap)

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

在右侧添加文字

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

在两侧添加文字

<div class="input-group">
    <span class="input-group-addon">$span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00span>
div>

设置尺寸

input-group-lg样式class类，写在input外层div里，设置片段输入框大尺寸(Bootstrap)
input-group-xs样式class类，写在input外层div里，设置片段输入框中尺寸(Bootstrap)
input-group-sm样式class类，写在input外层div里，设置片段输入框小尺寸(Bootstrap)

<div class="input-group input-group-lg">
    <span class="input-group-addon">$span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00span>
div>
<div class="input-group input-group-xs">
    <span class="input-group-addon">$span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00span>
div>
<div class="input-group input-group-sm">
    <span class="input-group-addon">$span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00span>
div>

左侧使用复选框和单选框，在片段里加入单选框或复选框标签即可

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

左侧使用按钮，在片段里加入按钮标签设置按钮样式即可

input-group-btn样式class类，写在input同级span里，设置输入框按钮片段(Bootstrap)

<div class="input-group">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">按钮button>
    span>
    <input type="text" class="form-control">
div>

左侧使用下拉菜单或分列式

divider样式class类，写在li里，隐藏当前元素(Bootstrap)
disabled样式class类，写在li里，禁用列表(Bootstrap)

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单
            <span class="caret">span>
        button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">网站导航li>
            <li><a href="#">首页a>li>
            <li><a href="#">资讯a>li>
            <li class="divider"><a href="#">产品a>li>
            <li class="disabled"><a href="#">关于a>li>
        ul>
    span>
    <input type="text" class="form-control">
div>

二．导航组件

Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。

基本导航标签页

nav样式class类，写在ul里，设置导航基础样式(Bootstrap)
nav-tabs样式class类，写在ul里，设置标签样式导航(Bootstrap)
active样式class类，写在li里，首选项样式(Bootstrap)

<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页a>li>
    <li><a href="#">资讯a>li>
    <li><a href="#">产品a>a>li>
    <li><a href="#">关于a>li>
ul>

胶囊式导航

nav-pills样式class类，写在ul里，设置胶囊样式导航(Bootstrap)

<ul class="nav nav-pills">
    <li class="active"><a href="#">首页a>li>
    <li><a href="#">资讯a>li>
    <li><a href="#">产品a>a>li>
    <li><a href="#">关于a>li>
ul>

垂直胶囊式导航

nav-stacked样式class类，写在ul里，设置垂直样式导航(Bootstrap)

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">首页a>li>
    <li><a href="#">资讯a>li>
    <li><a href="#">产品a>a>li>
    <li><a href="#">关于a>li>
ul>

导航两端对齐

nav-justified样式class类，写在ul里，设置导航文字居中，并且导航自适应100%宽度显示(Bootstrap)

<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">首页a>li>
    <li><a href="#">资讯a>li>
    <li><a href="#">产品a>a>li>
    <li><a href="#">关于a>li>
ul>

禁用导航中的项目

disabled样式class类，写在li里，禁用导航中的项目(Bootstrap)

<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">首页a>li>
    <li><a href="#">资讯a>li>
    <li><a href="#">产品a>a>li>
    <li class="disabled"><a href="#">关于a>li>
ul>

带下拉菜单的导航

<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页a>li>
    <li><a href="#">资讯a>li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            下拉菜单
            <span class="caret">span>
        a>
        <ul class="dropdown-menu">
            <li><a href="#">菜单一a>li>
            <li><a href="#">菜单二a>li>
        ul>
    li>
ul>

三．导航条组件

导航条是网站中作为导航页头的响应式基础组件。

基本格式

navbar样式class类，写在