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. Backbone模型

    现在进入最关键的组件 - 模型.模型用来存储应用的所有数据,以及直接和数据操作相关的逻辑.Backbone中的模型类是Backbone.Model,它包含了数据存储,数据验证,以及数据发生变动时触发相 ...

  2. spark Basic code demo

    spark-shell --master=spark://namenode01:7077 --executor-memory 2g --driver-class-path /app/spark141/ ...

  3. Ajax与用户交互的存储格式JSON

    数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应 ...

  4. 搭建docker私有仓库,建立k8s集群

    服务器IP角色分布 192.168.5.2 etcd server 192.168.5.2 kubernetes master 192.168.5.3 kubernetes node 192.168. ...

  5. LeetCode题解-----Maximum Gap

    题目描述: Given an unsorted array, find the maximum difference between the successive elements in its so ...

  6. HDU 5084 HeHe --找规律

    题意: 给出矩阵M,求M*M矩阵的r行c列的数,每个查询跟前一个查询的结果有关. 解法: 观察该矩阵得知,令ans = M*M,则 ans[x][y] = (n-1-x行的每个值)*(n-1+y列的每 ...

  7. C# Reflection BindingFlags

    定义包含在搜索中的成员 下列 BindingFlags 筛选标志可用于定义包含在搜索中的成员: 为了获取返回值,必须指定 BindingFlags.Instance 或 BindingFlags.St ...

  8. dalvik

    Google公司自己设计用于Android平台的Java虚拟机

  9. QTP和WinRunner区别

    QTP,全称为Quick Test Professional,它与WinRunner同为MI公司开发的功能强大的功能测试工具.从时间上来看,WinRunner在1995年便已经推出,远早于QTP,而Q ...

  10. 转: Github访问慢解决办法

    from: https://yq.aliyun.com/articles/36744 Github访问慢解决办法   zxiaofan 2016-04-20 17:25:00 浏览2156 评论0 摘 ...