使用Bootstrap美化按钮实例代码(demo)

在HTML5中,按钮的常用属性主要为背景颜色和大小

demo代码演示

一. input标签:

<input type="button" value="按钮" class="btn"/>

二. button标签:(这里用button标签举例)

<button type="button" class="btn btn-defult">提交</button>

btn 表示基本样式

btn-defult 表示默认样式

默认样式

btn-primary 表示背景色为蓝色

<button type="button" class="btn btn-defult">按钮</button>

primary

btn-success表示背景色为绿色

<button type="button" class="btn btn-success">按钮</button>

success

其他颜色属性

btn-waring 表示背景色为橙色

btn-danger 表示背景色为红色

btn-info 表示背景色为浅蓝色

btn-link 表示无背景色

<div class="row">
      <button type="button" class="btn btn-defult">按钮</button>
      <button type="button" class="btn btn-primary">按钮</button>
      <button type="button" class="btn btn-success">按钮</button>
      <button type="button" class="btn btn-waring">按钮</button>
      <button type="button" class="btn btn-info">按钮</button>
      <button type="button" class="btn btn-danger">按钮</button>
      <button type="button" class="btn btn-link">按钮</button>
</div>

效果展示

按钮尺寸:

btn-lg 较大

btn-md 中等

btn-sm 较小

btn-xs 更小

<div class="row" style="text-align: center">
      <button type="button" class="btn btn-defult btn-lg">按钮</button>
      <button type="button" class="btn btn-primary btn-md">按钮</button>
      <button type="button" class="btn btn-success btn-sm">按钮</button>
      <button type="button" class="btn btn-warning btn-xs">按钮</button>
      <button type="button" class="btn btn-info btn-sm">按钮</button>
      <button type="button" class="btn btn-danger btn-md">按钮</button>
      <button type="button" class="btn btn-link btn-lg">按钮</button>
</div>

效果展示

其他属性

btn-block 让按钮的宽度变为100%并且成了块级元素

active 表示按钮为激活状态

disabled 表示按钮为禁用状态不可点击

<button type="button" class="btn btn-danger btn-lg" disabled>按钮</button>

禁用变为灰色

三. 用a标签做一个按钮

<a herf="#" class="btn btn-danger active">按钮</a>

以上所述是小编给大家介绍的使用Bootstrap美化按钮实例代码(demo),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Bootstrap CSS组件之按钮组(btn-group)

    .btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的. 容器的多个分组以table风格进行显示,每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{ displ

  • 详解Bootstrap各式各样的按钮(推荐)

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我

  • Bootstrap中点击按钮后变灰并显示加载中实例代码

    Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示. 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

  • Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • BootStrap 超链接变按钮的实现方法

    <a href="#"> xuhaitao </a> 上面代码效果如下: btn btn-default :变成一个按钮样子 btn-lg : 大号的按钮 btn-block : 按钮填充整个宽度 JS按钮(bootstrap)超链接 html代码: button是bootstrap样式,请先加入bootstrap.min.css和jquery-1.11.1.min.js <a href="#" id="DownLoadAud

  • Bootstrap按钮功能之查询按钮和重置按钮

    Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景 一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮</title> <link rel=&qu

  • 使用Bootstrap美化按钮实例代码(demo)

    在HTML5中,按钮的常用属性主要为背景颜色和大小 demo代码演示 一. input标签: <input type="button" value="按钮" class="btn"/> 二. button标签:(这里用button标签举例) <button type="button" class="btn btn-defult">提交</button> btn 表示基本样

  • BootStrap数据表格实例代码

    首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:

  • BootStrap 导航条实例代码

    一.默认的导航条 制作默认的导航条,可分以下几步: 1.在ul里加上(ul class="nav navbar-nav")样式: 2.在ul外加一层div或nav(ps:HTML5新属性),并且添加样式(div class="navbar nabar-default"); <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> &l

  • 关于Android高德地图的简单开发实例代码(DEMO)

    废话不多说了,直接给大家上干货了. 以下为初次接触时 ,练手的DEMO import android.app.Activity; import android.app.ProgressDialog; import android.content.ContentValues; import android.database.Cursor; import android.database.SQLException; import android.database.sqlite.SQLiteDatab

  • Vue仿手机qq的实例代码(demo)

    vue简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 免责声明 本项目为开源项目,如有类同,纯属巧合.

  • JS 中使用Promise 实现红绿灯实例代码(demo)

    要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个

  • Android中实现图文并茂的按钮实例代码

    效果图如下所示: 代码: <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:gravity="center" android:background="#8

  • Android开发模仿qq视频通话悬浮按钮(实例代码)

    模仿qq视频通话的悬浮按钮的实例代码,如下所示: public class FloatingWindowService extends Service{ private static final String TAG="OnTouchListener"; private static View mView = null; private static WindowManager mWindowManager = null; private static Context mContext

  • Vue实现返回顶部按钮实例代码

    前言 本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧 实例代码: <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源

  • 原生js实现简单的Ripple按钮实例代码

    整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享. 效果如图 准备食材(html部分) <ul id="nav"> <li> <a href='#'> <span>首页</span> <span class="circle"></span> </a> </li> <li> <a href='#'>

随机推荐