bootstrap输入框组、导航和导航条

输入框组（input groups）

避免使用select  支持不好，使用输入框组

尺寸根据  input-group-lg    input-group-sm来选择

 

<div class="container">

    <div class="input-group input-group-lg">

        <span class="input-group-addon">@</span>

        <input type="text" class="form-control" placeholder="UserName">

    </div>

    <div class="input-group">

        <input type="text" class="form-control">

        <span class="input-group-addon">.00</span>

    </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">.00</span>

    </div>

</div>

 

导航的创建

标签页

注意：.nav-tabs类以来.nav基类

 

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>

  <li role="presentation"><a href="#">Messages</a></li>

</ul>

胶囊式标签页

注意：使用 .nav-pills类

 

<ul id="mytab" class="nav nav-pills" role="tablist">

    <li role="presentation" class="active"><a href="">home</a></li>

    <li role="presentation"><a href="">hello</a></li>

    <li role="presentation"><a href="">hello</a></li>

    <li role="presentation"><a href="">hello</a></li>

    <li role="presentation"><a href="">hello</a></li>

</ul>

添加下拉菜单

 

<div class="container">

    <ul id="mytab" class="nav nav-pills nav-justified" role="tablist">

        <li role="presentation" class="active"><a href="">home</a></li>

        <li role="presentation"><a href="">hello</a></li>

        <li role="presentation"><a href="">hello</a></li>

        <li role="presentation"><a href="">hello</a></li>

        <li role="presentation" class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">hello

        <span class="caret"></span>

        </a>

            <ul class="dropdown-menu" role="menu">

                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>

                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>

                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>

                <li role="presentation"><a href="" role="menuitem" tabindex="-1">hello</a></li>

            </ul>

        </li>

    </ul>

</div>

<script src="js/jquery.mini.js"></script>

<script src="js/bootstrap.min.js"></script>

<script>

    $("#mytab a").click(function(e){

        e.preventDefault();

        $(this).tab("show");

    })

</script>

 

导航条的使用

基本导航包括

表单   按钮   文本   非导航的链接   组件排列    固定在顶端或者底部    反色导航条以及路径导航

 

<!--路径导航-->

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

    <ol class="breadcrumb">

        <li><a href="">home</a></li>

        <li><a href="">contact</a></li>

        <li><a href="">product</a></li>

    </ol>

</nav>

 

 

<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

        <div class="navbar-fluid">

            <a class="navbar-brand" href="#">个人主页</a>

        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav" id="mytab">

                <li class="active"><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

            </ul>

            <form class="navbar-form navbar-left" role="search">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="搜索">

                </div>

                <button type="submit" class="btn btn-default">搜索</button>

            </form>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="">Link</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">点我<span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">

                        <li><a href="#">hello1</a></li>

                        <li><a href="#">hello2</a></li>

                        <li><a href="#">hello3</a></li>

                        <li><a href="#">hello4</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>