bootstrap学习心得:下拉效果,表单

作者:Jasmine - 2017年09月12日

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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!