今天开始学习bootstrap,目前计划从项目需要先开始做的模块涉及到bootstrap知识点先了解,记录一些要点,比较容易记得住。
1、布局(还未了解仔细)
2、导航
3、标签页
4、表格
导航:导航元素(分为:标签式的导航菜单、基本胶囊导航菜单)
标签式的导航菜单:只需要在无序列表父元素添加class:nav nav-tabs
基本胶囊的导航菜单:只需要在无序列表父元素添加class:nav nav-pills
默认是水平排列,可设置class:nav-stacked来垂直排列
两端对齐:.nav-justified
禁止链接显示样式:.disabled(功能不禁止,需使用js控制)
例如: <p>导航栏两端对齐</p>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">SVN</a></li>
<li class="disabled"><a href="#">iOS</a></li>
<li><a href="#">JAVA</a></li>
</ul>
导航元素结合下拉菜单:(本文中所讲的父级子元素等为相对的级别)
在导航元素中带有下拉菜单的列表项(父级)添加:.dropdown
导航元素中带有下拉菜单的列表项中的子元素(子元素)的上级(a标签).dropdown-toggle、data-toggle="dropdown",下级下拉列表 ul.dropdown-menu
例如: <p>带有下拉列表的导航栏</p>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">HOME</a>
<ul class="dropdown-menu">
<li class="divider"><a href="">aaaaaaa</a></li>
<li></li>
<li><a href="">dfdsgdfshg</a></li>
<li><a href="">dfdsgdfshg</a></li>