本章将通过实例讲解如何使用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. 算法学习--Day9

    继上一次完成最小生成树后,这次我开始准备最短路径的程序. 最短路分为两种算法,第一个为Floyd算法,第二个为Dijkstra. 简单来说,Floyd是以点为参照对象,它使用三层循环求解当前图中所有点 ...

  2. Codeforces Round #375 (Div. 2)【A，B【模拟】，D【DFS】】

    PS_B:阿洗吧!B题卧槽数组开了250... PS_D:D题主要挂在了50*50口算得了250,数组开小,然后一开始还错了.= =哎,以后对于数据范围还是注意一点: 卧槽,这场可真二百五了... A ...

  3. mysql 5.6 安装x64版本

    从mysql下载的 32bit的 msi installer 后 , 安装的时候没有发现选择x64的地方, 最后安装完毕后发现server是32bit的,只能删除server(  installer ...

  4. [Xcode 实际操作]一、博主领进门-(6)Xcode的iOS模拟器的基本使用方法

    目录:[Swift]Xcode实际操作 本文将演示Xcode的iOS模拟器的基本使用方法. 在项目导航区,鼠标右键[Assets.xcassets]资源文件夹. 隔壁右侧区域左下角点击[+],打开资源 ...

  5. [Xcode 实际操作]八、网络与多线程-(2)使用UIApplication对象打开网页

    目录:[Swift]Xcode实际操作 本文将演示如何使用应用程序单例对象,打开指定的网页. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKi ...

  6. 【NOI省选模拟】小奇的花园

    「题目背景」 小奇在家中的花园漫步时,总是会思考一些奇怪的问题. 「问题描述」 小奇的花园有n个温室,标号为1到n,温室以及以及温室间的双向道路形成一棵树. 每个温室都种植着一种花,随着季节的变换,温 ...

  7. 第二篇 HTML5打包发布IOS APP之苹果开发者账号申请流程

    打包技术转移到了公众号

  8. G - B-number

    #include<stdio.h> #include<string.h> using namespace std; typedef long long ll; ]; ][][] ...

  9. traceback异常打印

    traceback模块 traceback模块被用来跟踪异常返回信息. 如下例所示: import traceback try: raise SyntaxError, "traceback ...

  10. Jmeter----小技巧（3）

    1.关闭启动Jmeter时出现的面板 说明:启动Jmeter的同时往往会打开一个下图所示的面板,经常不小心关掉后,导致Jmeter停止运行,偶尔写了好久的脚本没来得及保存就没了,烦恼不已 怎样避免如上 ...