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>