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>

这里写图片描述

选项卡的内容

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

data-toggle=”tab”;选项卡的点击按钮上,必须添加该标签
href=”#tab1”;对应选项卡的对应的内容,用id来匹配
这里写图片描述

你可能感兴趣的:(bootstrap)