栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(23)--标签页

Bootstrap教程(23)--标签页

1. 概述

标签页使用频率不算高,也不算太低,主要用于同一显示区域内切换不同的内容。本篇来简单讲一下如何使用标签页。

2. 使用方法

首先我们先来看一个标准的标签页代码:

				
  
春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少
锄禾日当午 汗滴禾下土 谁知盘中餐 粒粒皆辛苦

对应效果如下:

接下来我们来具体讲解下,上面代码时如何描述出一个标签页的。

  1. nav nav-tabs类修饰ul元素,使ul元素表现出标签的样式。
  2. 为li元素添加data-toggle="tab"类,是为了JS语言能识别标签选项,所以在点击选项时会触发JS事件。
  3. href="#section1"是点击标签是,显示的对应元素的id。
  4. tab-content修饰的div元素,表示标签页的内容部分。
  5. tab-pane active,其中tab-pan表示具体的一个标签页内容,而active表示当前被`显示的标签页。
  6. id="section1"对应a标签指向的id。
3. 小结

标签页的语法相对固定,实际上理解了每个属性的意义,再看标签页的语法就很顺溜了。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243619.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号