css组件

小图标和下拉菜单

输入框和导航

 <ul class="nav nav-tabs nav-justified">

        <li class="active"><a href="#">我是演员一号</a></li>

        <li><a href="">我是演员一号</a></li>

        <!-- javascript:;  javascript:void(0) 都能阻止a链接的默认跳转 是关键字-->

        <li><a href="javascript:;">我是演员一号</a></li>

        <li><a href="javascript:void(0)">我是演员一号</a></li>

    </ul>

    <!-- nav-pills胶囊导航  nav-justified自适应导航 -->

    <ul class="nav nav-pills nav-justified">

        <li class="active"><a href="#">我是演员一号</a></li>

        <li><a href="">我是演员一号</a></li>

        <!-- javascript:;  javascript:void(0) 都能阻止a链接的默认跳转 是关键字-->

        <li><a href="javascript:;">我是演员一号</a></li>

        <li><a href="javascript:void(0)">我是演员一号</a></li>

    </ul>

    <!-- <table>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

    </table> -->

    <ul class="nav nav-pills">

        <li class="active"><a href="#">我是演员一号</a></li>

        <li><a href="">我是演员一号</a></li>

        <!-- javascript:;  javascript:void(0) 都能阻止a链接的默认跳转 是关键字-->

        <li><a href="javascript:;">我是演员一号</a></li>

        <li><a href="javascript:void(0)">我是演员一号</a></li>

        <li class="dropdown open">

            <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>

                <li class="dropdown open">

                    <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>

        </li>

    </ul>

    <script src="./js/jquery-1.12.4.js"></script>

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

    <script>

        $('.nav,.nav-tabs li').click(function (e) {

            $(this).addClass('active').siblings().removeClass('active')

            /* 阻止默认事件 冒泡 */

            return false;

        })

        $('.nav,.nav-pills li').click(function (e) {

            $(this).addClass('active').siblings().removeClass('active')

            /* 阻止默认事件 冒泡 */

            return false;

        })

        $('.dropdown').click(function(){ $(this).toggleClass('open') })

    </script>