本章将通过实例讲解如何使用Bootstrap按钮，任何带有class.btn的元素都会继承圆角灰色默认按钮样式，但Bootstrap提供了一些选项来定义按钮的样式。

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：基本按钮</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>Bootstrap:基本按钮</h2>
<p>.btn类是按钮的基本样式</p>
<button class="btn">基本按钮</button>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 基本按钮的更多相关文章

  1. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  2. Bootstrap设置按钮禁用

    在Bootstrap中,按钮可以使用button标签或者a标签.设置按钮禁用可以通过两种方式,一种是通用CSS样式,一种是用过JS脚本动态设置,下面举例说明! <!DOCTYPE html> ...

  3. Bootstrap 原始按钮

    Bootstrap 原始按钮 <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q ...

  4. Bootstrap学习------按钮

    Bootstrap为我们提供了按钮组的样式,博主写了几个简单的例子,以后也许用的到. 效果如下 代码如下 <!DOCTYPE html> <html> <head> ...

  5. yii2 配合bootstrap添加按钮

    新增一个按钮 1.bootstrap 官网:http://getbootstrap.com/ 2.bootstrap 中文官网:http://v3.bootcss.com/ 在视图文件中: <? ...

  6. Bootstrap单按钮的下拉菜单

    简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...

  7. 详解Bootstrap 定义按钮的样式（CSS）

    以下样式可用于<a>, <button>, 或 <input> 元素上: 更多关于Bootstrap 定义CSS样式的可查看:http://v2.bootcss.c ...

  8. bootstrap切换按钮点击后显示的颜色

    点击按钮后将按钮类库切换为值为btn-success ·· test ·· jquery code ·· $(".tag-checkbox").toggleClass(" ...

  9. bootstrap -- css -- 按钮

    本文中提到的按钮样式,适用于:<a>, <button>, 或 <input> 元素上 但最好在 <button> 元素上使用按钮 class,避免跨浏 ...

随机推荐

  1. QuantLib 金融计算——基本组件之 ExchangeRateManager 类

    目录 QuantLib 金融计算--基本组件之 ExchangeRateManager 类 概述 Money 类中的汇率转换配置 ExchangeRateManager 函数 如果未做特别说明,文中的 ...

  2. C 语言实例 - 输出当前文件执行代码

    C 语言实例 - 输出当前文件执行代码 输出当前文件执行代码,__FILE__ 为当前执行的文件常量. 实例 #include <stdio.h> int main() { FILE *f ...

  3. 002-tomcat安装与配置

    1.创建目录 [root@bogon tomcat]#mkdir /usr/local/java/tomcat 2.上传压缩包并解压 [root@bogon tomcat]# tar xvf apac ...

  4. flask_之URL

    URL篇 在分析路由匹配过程之前,我们先来看看 flask 中,构建这个路由规则的两种方法: 通过 @app.route() decorator 通过 app.add_url_rule,这个方法的签名 ...

  5. Gym - 101810C ACM International Collegiate Programming Contest (2018)

    bryce1010模板 http://codeforces.com/gym/101810 #include <bits/stdc++.h> using namespace std; #de ...

  6. 微信支付——基于laravel框架的php实现

    现在经手的几乎每个项目都支持微信支付,简单记录下接入的大致流程. 1.首先商户等申请各种账号,微信支付商户号,APPID,API密钥,Appsecret 2.app端上传支付需要的各个字段 3.后台收 ...

  7. 1-26HashSet简介

    Set的特点 Set里面存储的元素不能重复,没有索引,存取顺序不一致. package com.monkey1024.set; import java.util.HashSet; /** * Set的 ...

  8. CD4051的切换时间

    CD4051:1 2 4 5 12 13 14 15  8个选择IO输入/输出端:3:I/O6:片选低电平有效,搞定平所有通道不通9 10 11:地址选择:功能:通过地址选择译码8个中的某个通道与3脚 ...

  9. [译]Understanding ECMAScript6 函数

    函数 函数是任何编程语言的重要组成部分,而自从JavaScript被引入以来,JavaScript的函数就未有太多改变.遗留下来的积压问题及微妙行为使我们很容易犯错误,或者需要更多的代码来实现一个非常 ...

  10. python 多继承（新式类） 三

    深入super 一下内容引用自:http://www.cnblogs.com/lovemo1314/archive/2011/05/03/2035005.html,写的挺好的. 代码段3 class ...