bootstrap的选项卡和选项卡的内容

版权声明：本文为博主原创文章，未经博主允许不得转载。

选项卡

    <div class="container">
        <h1 class="page-header">选项卡h1>
        
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Javaa>
            li>
            <li><a href="#">C++a>
            li>
            <li><a href="#">.Neta>
            li>
        ul>
    div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

选项卡的内容

    <div class="container">
        <h1 class="page-header">选项卡内容h1>
        
        <div class="tabbable">
            
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Javaa>
                li>
                <li><a href="#tab2" data-toggle="tab">C++a>
                li>
                <li><a href="#tab3" data-toggle="tab">.Neta>
                li>
            ul>
            
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <p>Javap>
                div>
                <div class="tab-pane" id="tab2">
                    <p>C++p>
                div>
                <div class="tab-pane" id="tab3">
                    <p>.Netp>
                div>
            div>
        div>
    div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

data-toggle=”tab”；选项卡的点击按钮上，必须添加该标签 
href=”#tab1”；对应选项卡的对应的内容，用id来匹配 

转自http://blog.csdn.net/xdd_lmd/article/details/46582127