参考网址:http://v3.bootcss.com/(能抄不写)

1、按钮颜色样式:

对应代码:(主要体现在class内容:btn-default,btn-primary...)

<button type="button" class="btn btn-default">(默认样式)Default</button>

<button type="button" class="btn btn-primary">(首选项)Primary</button>

<button type="button" class="btn btn-success">(成功)Success</button>

<button type="button" class="btn btn-info">(一般信息)Info</button>

<button type="button" class="btn btn-warning">(警告)Warning</button>

<button type="button" class="btn btn-danger">(危险)Danger</button>

<button type="button" class="btn btn-link">(链接)Link</button>

<a href="#" class="btn btn-primary" role="button">Primary link</a>

2、按钮大小样式

对应代码:(主要体现在class内容:btn-lg,btn-sm,btn-xs...)

<p>

<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>

<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>

</p>

<p>

<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>

<button type="button" class="btn btn-default">(默认尺寸)Default button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>

<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>

<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>

</p>

3、禁用btn

对应代码:(主要体现在class内容:disabled="disabled" ; disabled)

<button class="btn btn-lg btn-primary" type="button" disabled="disabled">Primary button</button>

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

Bootstrap-按钮篇btn的更多相关文章

  1. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  2. bootstrap按钮组

    种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...

  3. bootstrap按钮

    按钮 基类 -btn 样式 btn-default(默认) btn-link(链接) 大小 btn-*[lg,sm,xs] 状态 active disabled <!DOCTYPE HTML&g ...

  4. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  5. Bootstrap 按钮分组

    Bootstrap 按钮分组: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  8. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  9. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  10. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

随机推荐

  1. 水费管理系统-ER图和流程图

    ER图:

  2. 用 k8s 管理机密信息【转】

    应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 Secret. Secret 会以密文的方式存储 ...

  3. 磁盘空间引起ES集群shard unassigned的处理过程

    1.问题描述 早上醒来发现手机有很多ES状态为red的告警,集群就前几天加了几个每天有十多亿记录的业务,当时估算过磁盘容量,应该是没有问题的,但是现在集群状态突然变成red了,这就有点懵逼了. 2.查 ...

  4. 学习Linux系统永远都不晚

    作为一名机械专业毕业的学生,两年的工作经历实实在在地教会了我如何认清现实,让当初那个对机械行业无比憧憬的少年明白了自己选择的路有多艰难.由于我的父母都是工人,所以我比其他同龄人能更早地接触到工业的魅力 ...

  5. 当3D打影人头”成为黑客的秘密武器,隐私该如何保护?

    在<碟中谍>系列电影中,除了超级敬业又帅气的阿汤哥之外,最让人津津乐道的桥段就是用3D打印做出来的"人头".通过这些惟妙惟肖的"人头",阿汤哥完成了 ...

  6. element设置headers添加token

    <template>   <div>     <el-upload       action="http://localhost:3000/picture&qu ...

  7. bug-解决微信页面input键盘不回弹问题

    pageReturn () { this.$refs.phoneValue.blur(); this.$refs.verifyCode.blur(); setTimeout(() => { wi ...

  8. 01.Delphi最简单的接口

    我想学习一个插件框架,但是那个框架里面大量用到了接口,于是不得不把接口看一下了.总感觉接口编程这一块非常的绕,每一行都注释了. unit Unit1; interface uses Windows, ...

  9. GeneWise

    GeneWise是用于将蛋白质序列进行同源预测的软件

  10. HDU - 1864 最大报销额 (01背包)

    题意:现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600元.现请你编写 ...