发表于： 2020-02-10 23:17:47
1 1221
今日完成的事
学习bootstrape组件
主要学习按钮组 导航条 列表组相关
明日计划
运用所学bootstrap知识修改task6
<div class="container">
<h1>动态标签</h1>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">主页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单1</a></li>
<li><a data-toggle="tab" href="#menu2">菜单2</a></li>
<li><a data-toggle="tab" href="#menu3">菜单3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首页菜单</h3>
</div>
<div id="menu1" class="tab-pane ">
<h3>菜单 1</h3>
</div>
<div id="menu2" class="tab-pane ">
<h3>菜单 2</h3>
</div>
<div id="menu3" class="tab-pane ">
<h3>菜单 3</h3>
</div>
</div>
</div>
一个基本的动态标签
bootstrape中多次出现date-toggle 经查询主要用来绑定事件，与js等相关联
还有用作选择器
例 bootstrap中的两段css样式
[data-toggle=buttons]>.btn input[type=checkbox]
[data-toggle=buttons]>.btn-group>.btn input[type=checkbox]
.fade .in为淡入淡出动画
.In中的opacity覆盖.fade 中的属性 使文字默认直接显示而不是重新点击后显示
收获
所学知识较杂，需要慢慢消化，有很多知识涉及到js，暂时先放下，待学习js后再回头学习
返回列表
评论