Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色边框颜色文本颜色。

<button type="button" class="btn btn-default">基本样式</button>

  几种不同样式风格的按钮

  <button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

  一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a href="" class="btn btn-default">标签</a>

  在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,下面是不同风格样式的说明

Bootstrap系列 -- 22. 按钮的更多相关文章

  1. Bootstrap系列 -- 22. 按钮详解

    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色 ...

  2. Bootstrap系列 -- 30. 按钮工具栏

    在富文本编辑器中,将按钮组分组排列在一起,比如说复制.剪切和粘贴一组:左对齐.中间对齐.右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-grou ...

  3. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

  4. Bootstrap系列 -- 35. 按钮的向下向上三角形

    按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret”. <div class="btn-group d ...

  5. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  6. Bootstrap系列 -- 32. 按钮垂直分组

    实际运用当中,总会碰到垂直显示的效果.在Bootstrap框架中也提供了这样的风格.我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可. <div ...

  7. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  8. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  9. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

随机推荐

  1. 被废弃的 Thread.stop, Thread.suspend, Thread.resume 和Runtime.runFinalizersOnExit

    最近学习多线程的知识,看到API里说这些方法被废弃了,就查了一下原因 Thread.stop 这个方法会解除被加锁的对象的锁,因而可能造成这些对象处于不一致的状态,而且这个方法造成的ThreadDea ...

  2. cocos2d-x之Action特效

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...

  3. zsh

    一.简介 Zsh 也许是目前最好用的 shell,是 bash 替代品中较为优秀的一个.   二.优点 1)补全 zsh 的命令补全功能非常强大,可以补齐路径,补齐命令,补齐参数等. 按下 tab 键 ...

  4. python 定时任务

    Python 定时任务 最近学习到了 python 中两种开启定时任务的方法,和大家分享一下心得. sched.scheduler() threading.Timer() sched 定时任务 使用s ...

  5. <a href="javascript:void(0)" onclick="ff()" ></a> 用法解析

    javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...

  6. QTP基础学习(一)安装目录介绍

    上一篇介绍了QTP 10 安装,安装完成后就可以看到文件的目录了,这里主要介绍以下几个目录及作用. 简单介绍部分目录 1.addins:插件包 2.bin目录:可执行程序,这里存储了很多配置文件.运行 ...

  7. vmware12安装vmtools

    一. 1. 机器要开启支持BIOS的选项. 二. 1. 点击vmware 应用 vmware install 2. 虚拟机: tar  xvf vmtools-distb.tgr.gz 3. 虚拟机: ...

  8. android ant 自动编译打包

    http://www.cnblogs.com/tankaixiong/archive/2010/11/24/1887156.html

  9. 观察器observes与对象初始化

    Demo.Person2 = Ember.Object.extend({ init: function() { alert('lljsd'); this.set('salutation', " ...

  10. Gerrit日常操作命令收集

    Gerrit代码审核工具是个好东西,尤其是在和Gitlab和Jenkins对接后,在代码控制方面有着无与伦比的优势. 在公司线上部署了一套Gerrit系统,在日常运维中,使用了很多gerrit命令,在 ...