-
导航条 ul标签加入.nav和.nav两个类样式 eg: <ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li>//被选中 <li class="disabled"><a href="##">CSS3</a></li>//被禁用 <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>查看全部
-
下拉菜单的总结 1.实现普通下拉菜单：.dropdown>button.dropdown-toggle[data-toggle="dropdown"]+ul.dropdown-menu; 2.按钮下拉菜单：把.dropdown换成.btn-group即可。 3.下拉菜单变上拉菜单：.dropdown.dropup或.btn-group.dropup 4.下拉菜单通过绝对定位实现，可通过设置top,bottom,left,right改变下拉菜单出现的位置。 5.dropdown-header,li.divider,li.active,li.disabled查看全部
-
下拉菜单变成上拉菜单：改变三角形符号方向 给btn-group追加dropup类名 eg: <div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>查看全部
-
按钮下拉菜单 和普通下拉菜单的区别在于外部容器div.dropdown换成div.btn-group eg: <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>查看全部
-
等分按钮组（自适应按钮组） 。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。 在按钮组"btn-group"上追加一个"btn-group-justified" eg: <div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btnbtn-default" href="#">首页</a> <a class="btnbtn-default" href="#">产品展示</a> <a class="btnbtn-default" href="#">案例分析</a> <a class="btnbtn-default" href="#">联系我们</a> </div> </div>查看全部
-
垂直按钮组和下拉菜单的结合 把水平按钮组的class="btn-group"换成class="btn-group-vertical" eg: <div class="btn-group-vertical"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展示</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>查看全部
-
下拉菜单和按钮组排列在一起，实现类似于导航菜单的效果 把下拉菜单的容器换成btn-group eg: <div class="btn-group"> <button class="btnbtn-default" type="button">首页</button> <button class="btnbtn-default" type="button">产品展示</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>查看全部
-
按钮工具栏： <div class="btn-toobar"> <div class="btn-group btn-group-lg">...</div>大按钮 <div class="btn-group btn-group-sm">...</div>小按钮 <div class="btn-group btn-group-xs">...</div>超小按钮 <div class="btn-group">...</div> </div>查看全部
-
按钮组模板： <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button> </div> <script src="http://img1.sycdn.imooc.com//down/53c6484f00013d9300000000.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
<!--全部input类型都在这了--> <input type="email" class="form-control" placeholder="Enter email"> text button checkbox date datetime datetime-local img file hidden month number password radio range reset search submit tel time url week hidden查看全部
-
下拉菜单的状态 给li设置class为 hover:悬浮 focus:焦点 active:当前 disabled:禁用查看全部
-
下拉菜单与父容器左边中间右边对齐 1、ul增加 class="dropdown-menu-right"(右对齐) 默认(左对齐) 2、同时要为.dropdown添加float:left样式查看全部
-
将下拉菜单分组是用divider,为了让这个分组更明显，给每个组增加一个头 eg： <li role="presentation" class="dropdown-header">第一部分菜单头部</li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li>查看全部
-
下拉菜单的下拉分割线 给下拉菜单的li天剑class="divider"查看全部
-
下拉菜单 模板 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div> <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script> <script src='https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 注：必须要1.90以上版本的jquery才可以和bootstrap.js配合使用查看全部
举报
0/150
提交
取消