bootstrap选项卡

一、选项卡样式

1、nav-tabs样式的选项卡

nav和nav-tabs类共同决定选项卡的样式。带有active类的标签项处于激活状态,显示为黑色,外面有圆角矩形边框,未激活的标签项,显示蓝色。


nav-tabs样式的选项卡
2、 nav-tabs, nav-stacked样式的选项卡

在 nav-tabs样式的选项卡基础上给ul标签添加nav-stacked类。

 
bootstrap选项卡_第1张图片
nav-tabs, nav-stacked样式的选项卡
3、nav-pills样式的选项卡

nav-pills样式的选项卡

二、选项卡内容

 
  

Wordpress,优雅的CMS

Drupal,灵活强大的CMS

Joomla,简单易用的CMS

div标签:包含所有标签项的内容
-tab-content类
-div标签:包含p标签
----tab-pane类
----active类:激活状态下的标签项对应的标签内容div设置为active
----id:单个标签项的id值
----p标签:包含单个标签项的内容

标签项li中的a标签
-href属性:值为对应标签项内容的id值。
-data-toggle属性:值为tab

选项卡内容

你可能感兴趣的:(bootstrap选项卡)