bootstrap学习心得:下拉效果,表单
bootstrap大家都晓得,是用来做前端的响应式框架,用了这个框架前端的一些效果省了很多时间,比如图片切换,tab,响应式导航,栅格化排版,按钮等.该用来做后台跟企业网站比较多,做电商网站的案例还是比较少的.
电商网站的特点就是排版不会很均匀的排版,很多内容,每块一排不是12的倍数,弄不了响应式的,用这个刚开始的时候以为下拉框还可以用得上呢,没想到下拉select效果用不了,里面的是a链接跳转来的,不能选中的默认的状态上去.还要自己写js效果去实现,也怪麻烦的.
1.下拉效果,我自己下拉实现的效果,代码:
html:
<div class="select fl" style="width: 140px;"> <div class="dropBtn"> <span class="placeholder">选择省份</span> <i class="sl_ic"></i> </div> <ul> <li><a href="#">选择省份</a></li> <li><a href="#">安徽省</a></li> <li><a href="#">澳门特别行政区</a></li> <li><a href="#">北京市</a></li> </ul> </div> <div class="select fl" style="width: 140px;"> <div class="dropBtn"> <span class="placeholder">选择市级</span> <i class="sl_ic"></i> </div> <ul> <li><a href="#">选择市级</a></li> <li><a href="#">中山</a></li> <li><a href="#">选择市级1</a></li> <li><a href="#">选择市级1</a></li> </ul> </div> <div class="select fl" style="width: 290px;"> <div class="dropBtn"> <span class="placeholder">选择体验馆</span> <i class="sl_ic"></i> </div> <ul> <li><a href="#">选择体验馆</a></li> <li><a href="#">广东省中山市古镇镇灯网旗舰店</a></li> <li><a href="#">广东省中山市古镇镇灯网旗舰店</a></li> <li><a href="#">广东省中山市古镇镇灯网旗舰店</a></li> </ul> </div>
样式:
/*下拉列表*/ .select { position: relative; display: block; margin: 0 auto; width: 100%; color: #666; vertical-align: middle; text-align: left;font-family: "微软雅黑"; margin-right:16px; margin-bottom:16px; user-select: none; -webkit-touch-callout: none; } .select .dropBtn{ position: relative; cursor: pointer; background: #fff; border:1px solid #ccc; border-radius: 5px; } .select .placeholder { display: block; z-index: 1; font-size:12px;color: #666; padding:0 36px 0 10px; height:30px; line-height:30px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis; cursor: pointer;border-radius: 5px; } .select .sl_ic { position: absolute; right: 0; top: 0; width: 32px; height: 30px; display: block; background: #ccc; background-image: url(../images/pub/sl_ic.png); background-repeat: no-repeat;background-position: center center; } .select.is-open .sl_ic{ background-image: url(../images/pub/sled_ic.png);} .select.is-open ul { display: block; } .select ul { display: none; position: absolute; overflow: hidden; width: 100%;max-height: 200px; overflow-y: auto; background: #fff; top: 100%; left: 0; border:1px solid #ccc;list-style: none; margin: 5px 0 0; padding: 0;border-radius: 5px; z-index: 100; } .select ul li { display: block; text-align: left;font-size:12px; color: #999; cursor: pointer;height: 32px; line-height:32px; padding:0 10px; margin-bottom:0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select ul li:hover,.select ul li:hover a { background: #ea5413; color: #fff; }
js:
//下拉效果 $('.select').on('click', '.dropBtn', function (e) { var parent = $(this).closest('.select'); if (!parent.hasClass('is-open')) { parent.addClass('is-open'); parent.css("z-index", "2").siblings().css("z-index", "1"); $('.select.is-open').not(parent).removeClass('is-open'); } else { parent.removeClass('is-open'); } e.stopPropagation(); }).on('click', 'ul>li', function () { var parent = $(this).closest('.select'); parent.css("z-index", "1"); parent.removeClass('is-open').find('.placeholder').text($(this).text()); return false }); $(document).on('click', function () { $('.select.is-open').removeClass('is-open'); });
效果:
该下拉效果可以兼容ie7以上.
2.还有你写表单的时候,比如input,你写的样式总是被bs里面的样式给覆盖了,因为他里面的input是这样写:
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
所以你写的时候也要这样写:
.input[type="password"]{ //你的样式 }
这样子你的优选级才会更高,按钮的也是一样.
3.鼠标经常的样式效果:比如你写的按钮:
//一般会写成这样 .d-btn:hover{ background:#ea5413;color:#fff; }
你写了之后你以为已经可以了,是吗?? 出乎意料的是你点击试试,肯定被原来bs里面的默认样式给覆盖了,点击是另外的效果.解决方法:
.d-btn:hover,.d-btn:active,.d-btn:focus{ background:#ea5413;color:#fff; }
这样才是正确的.
框架固然是好,但是原来有些样式总会被覆盖或影响到.所以你做的时候细心一点.
如果你想要兼容ie7以上的话,请用Bootstrap2中文文档(v2.3.2)版本,如果是兼容ie8+,不用兼容ie7或是ie8的话,就用Bootstrap3中文文档(v3.3.7)版本吧,因为3版本的弹窗不兼容垂直居中,那个样式只有ie9以上才兼容.所以你如果想要兼容低版本的话,就选择2吧.不需要考虑太多版本兼容的话,就用最新的版本,固然是最好的.
如果大家有其他问题,可以提出来喔
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/575
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!