初步使用bootstrap框架

       在web前端的页面中，少不了用到按键、输入框之类的元素。之前有一个项目，做完后领导说你这个按键怎么点击样式没变化。后来参照了一些别的例子，发现自己做的确实用户体验不好。最近接触了bootstrap，下面分享下自己的心得。

1.按键

       对于按键，bootstrap主要使用的是css的hover选择器和focus选择器。区别是hover选择鼠标指针在上浮动的元素，focus选择被点击的元素，然后设置其样式。

       下面给出我在一个项目中用到的这个效果，鼠标不在按键“发布”上时如下图：

　　鼠标移到按键上时：

html代码：

<input type="submit" class="btn submit-btn" value="发布">

CSS样式：

.submit-btn {
    width: 15%;
    height: 60px;
    background: rgb(250,121,152);
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
}

.submit-btn:hover {
    color: #FFF;
    background-color: rgb(250,100,100);
    border-color: #8c8c8c;
}

        其中，“btn”样式是bootstrap的默认样式。如果需要在点击按键时变成另外一个样式，可以使用focus选择器。

2.进度条

对于进度条，是上传文件时需要用到的功能，我在一个项目用的上传图片的进度条也用到了bootstrap框架，参照的是七牛上传文件的demo：点击打开链接。

我做的进度条效果图：

html代码：

<!--上传图片进度提示框-->
        <div class="upload-img-progress" style="display: none;">
            <div class="prompt-box">
                <div class="box">
                    <p class="prompt-head">图片上传中......</p>
                    <div class="line"></div>
                    <div class="prompt-body">
                        <div class="progress progress-striped">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuemax="100">
                            </div>
                            <div class="progress-text text-center"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

js代码：

$(".progress-bar").attr('aria-valuenow', file.percent).css('width', file.percent + '%');
$('.progress-text').text(file.percent + '%');
$(".upload-img-progress").show();

       这就是框架的优势，直接站在巨人的肩膀上做开发，简直爽歪歪。

       bootstrap.css被称为目前最优秀的前端CSS框架，是为移动端设计的，以后在项目中要多多使用，做出炫酷屌炸天的网页。