受欢迎的博客标签

Bootstrap——标签页制作和弹出框制作详细注释

Published

 标签页是一个经常使用的组件,可以放置较多的内容,又可以节省页面空间,其实吧,就是我们常说的选项卡。

<!-- 标签页的设置,分为两部分,一个是标签列表,一个是内容区 .nav .nav-tabs 定义一个标签页 -->     <ul class="nav nav-tabs" role="tablist">    

 <li class="active">      

  <!-- 定义一个标签选项 href="" 指向内容区的id号        -->         

<a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a>    

 </li>     

<li>         

<a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a>    

 </li>     

<li>         <a href="#tab-safari" role="tab" data-toggle="tab">Safari</a>     </li>     

<li>         <a href="#tab-opera" role="tab" data-toggle="tab">Opera</a>     </li>    

 <li>         <a href="#tab-ie" role="tab" data-toggle="tab">IE</a>     </li>    

 </ul>     

<!-- .tab-content 定义了标签页的内容区域     -->     

<div class="tab-content">    

 <!-- .tab-pane 定义了一个标签的内容 id=""的值和标签列表相对应     -->        <div class="tab-pane active" id="tab-chrome">       

</div>       

<div class="tab-pane" id="tab-firefox">              

</div>       

<div class="tab-pane" id="tab-safari">              

</div>       

<div class="tab-pane" id="tab-opera">              

</div>       

<div class="tab-pane" id="tab-ie">              

</div>      

</div>  

弹出框制作:用于弹出提示信息,浮动于页面之上。    

 一个完整的弹出框包含三部分:头部、内容、底部。弹出框一般从属于body元素,为弹出框分配一个id,然后在需要弹出的元素上设置data-toggle="modal"    data-target="#about" 首先设置一个点击事件:     <a href="#" data-toggle="modal" data-target="#linux">Linux</a> 然后设置弹出框内容: <!--      .modal 定义一个弹出框 #linux为这个弹出框指定一个id, 如果弹出框很多的时候便于区分     -->     <div class="modal fade" id="linux" tabindex="-1" role="dialog" aria-labelledby="modal-label"          aria-hidden="true">         <div class="modal-dialog">          <!-- .modal-content 开始弹出框的内容信息 内容信息可以分为三部分 1. .modal-header 头部信息 2. .modal-body 信息主干 3. .modal-footer 信息尾部          -->             <div class="modal-content">                 <div class="modal-header">                  <!--点击关闭的按钮-->                     <button type="button" class="close" data-dismiss="modal">                      <span aria-hidden="true">&times;</span>                      <span class="sr-only">关闭</span>                     </button>                     <h4 class="modal-title" id="modal-label">linux</h4>                 </div>                 <!--内容信息-->                 <div class="modal-body">                     <p>linux是一款非常牛叉的系统,广泛应用于web服务器。</p>                 </div>                 <!-- .modal-footer 信息的尾部,一般都是确定、取消等按钮                 -->                 <div class="modal-footer">                     <button type="button" class="btn btn-default" data-dismiss="modal">                         关闭                     </button>                 </div>             </div>         </div>     </div>    .