初步使用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框架，是为移动端设计的，以后在项目中要多多使用，做出炫酷屌炸天的网页。

初步使用bootstrap框架相关推荐

Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
Python之flask结合Bootstrap框架快速搭建Web应用
目录前言安装bootstrap扩展模板的继承总结前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
将用bootstrap框架的html文件转为eclipse中jsp文件
eclipse中引入bootstrap框架最近跟着我们专业一个很厉害很崇拜的老师捯饬毕设,他让我学自适应框架bootstrap,花了一周时间了解了该框架的基本架构和用法,上去就写html文件,本来 ...
在Bootstrap框架中，form-control的效果
在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度 ...
使用BootStrap框架设置全局CSS样式
一.排版标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
基于bootstrap框架在ie8以下,兼容媒体查询[css样式]
1 <style type="text/css"> 2 /*基于bootstrap框架在ie8以下,兼容媒体查询*/ 3 .row [class^="col- ...
python web开发 Bootstrap框架基础
文章目录 1. 安装 2. Bootstrap 5 基本应用 learning from <python web开发从入门到精通> Bootstrap 是最受欢迎的前端组件库,用于 HT ...

初步使用bootstrap框架

初步使用bootstrap框架相关推荐

最新文章

热门文章