记录一个bootstrap的错误,这个错误因为我删除了一个class就导致了页面上显示的错误,这是一个惨痛的教训,特此记录,提醒自己在做前端的修改时,一定要慎之又慎。如果真的要做改动,改完之后也要测一下
这个class是:btn-group
页面上的效果是这样的:点击Edit Columns会出现下面的下拉框列表,再点击一下Edit Columns之后,下拉框列表会消失
这种效果的实现是通过bootstrap来实现的,所用到的代码是这样的一段代码:
<div id="editManageColumns" class="btn-group columnSelecter"> <button id="btnEditManageColumns" type="button" title="Edit Columns" class="btn btn-primary filterbutton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="glyphicon glyphicon-pencil buttonicon"></span><span class="txt">Edit Columns</span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#"><input type="checkbox" checked colunmName="email"><span class="dropdownlbl" value="2">Email</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="sponsorEmail"><span class="dropdownlbl" value="3">SponsorEmail</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="company"><span class="dropdownlbl" value="4">Company</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="justification"><span class="dropdownlbl" value="5">Justification</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="roles"><span class="dropdownlbl" value="6">Roles</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="registerTime"><span class="dropdownlbl" value="7">Register Time</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="lastLoginTime"><span class="dropdownlbl" value="8">Last Login Time</span></a></li> <li><a href="#"><input type="checkbox" checked colunmName="action"><span class="dropdownlbl" value="9">Action</span></a></li> </ul> </div>
如果要实现这样toggle的button组合,有几点需要注意的
用到的html结构是这样的:
<div>
<button></button>
<ul></ul>
</div>
<div>标签上必须要用btn-group这个class
<button>标签上必须要用data-toggle="dropdown"这个属性
<ul>标签上必须要用dropdown-menu这个class
也就是正确的html结构为:
<div class="btn-group">
<button data-toggle="dropdown"></button>
<ul class="dropdown-menu"></ul>
</div>
若要实现上面截图中的效果,就需要用这个结构。
在这个问题中,之所以会删掉btn-group这个class是为了修改另外一个问题,button的右边框圆角效果消失了,为了改这个问题而去掉了btn-group
这个经验教训让我知道了如果以后遇到类似的问题要修改,就应该不要去动之前的页面结构,而是在原来的基础加新的class,在新的class中去修目前遇到的问题!