按钮

基类

-btn

样式

btn-default（默认）

btn-link（链接）

大小

btn-*[lg,sm,xs]

状态

active

disabled

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/bootstrap.css">

<style>

.tips1{ width:30px; height:300px; background:black; right:0;}

.tips2{ width:30px; height:100px; background:blue; right:0;}

</style>

</head>

<body style="height:2000px;">

<div class="container">

    <br>

    <input type="button" value="默认样式">

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="成功" class="btn btn-success">

    <input type="button" value="一般信息" class="btn btn-info">

    <input type="button" value="警告" class="btn btn-warning">

    <input type="button" value="危险" class="btn btn-danger">

    <br><br>

    <input type="button" value="按钮" class="btn">

    <input type="button" value="按钮" class="btn btn-default">

    <input type="button" value="按钮" class="btn btn-link">

    <br><br>

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="首选项" class="btn btn-primary btn-lg">

    <input type="button" value="首选项" class="btn btn-primary btn-sm">

    <input type="button" value="首选项" class="btn btn-primary btn-xs">

    <br><br>

    <input type="text" class="form-control">

    <input type="text" class="form-control input-lg">

    <input type="text" class="form-control input-sm">

    <br><br>

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="首选项" class="btn btn-primary active">

    <input type="button" value="首选项" class="btn btn-primary disabled">

    <br><br>

    <a href="#" class="btn btn-primary">按钮</a>

    <button class="btn btn-primary">按钮</button>

    <br><br>

    <button class="btn btn-primary btn-block">按钮</button>

</div>

</body>

<script src="js/jquery-1.11.1.js"></script>

<script src="js/bootstrap.js"></script>

</html>

bootstrap按钮的更多相关文章

  1. Bootstrap 按钮

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

  2. BootStrap 按钮组简单介绍

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

  3. Bootstrap 按钮分组

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

  4. bootstrap 按钮 文本 浮动 隐藏

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

  5. Bootstrap按钮插件

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

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

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

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

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

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

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

  9. Bootstrap 按钮，图片，辅助类

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

  10. 测开之路一百一十二：bootstrap按钮

    bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮

随机推荐

  1. JPG / TGA

    JPG http://www.openjpeg.org http://libjpeg.sourceforge.net TGA http://tgalib.sourceforge.net

  2. ecshop 影响全局的标量lib_main.php

    lib_mian.php 前台公用函数库 1.增加自定义变量  "版权所属"  $copyright    或者  $smarty->assign('get_article_ ...

  3. PHP页面跳转

    PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header( ...

  4. UITextField限制输入文字

    一.viewDidLoad时监听通知 NSNotificationCenter *center = [NSNotificationCenter defaultCenter]; [center addO ...

  5. 正则匹配IP

    分析 IP地址的长度为32位,分为4段,每段8位,用十进制数字表示,每段数字范围为0~255( 2^8 ),段与段之间用英文句点“.”隔开.例如:某台计算机IP地址为10.11.44.100. IP地 ...

  6. msbuild

    https://msdn.microsoft.com/zh-cn/library/ms171466(v=vs.100).aspx

  7. ConfuserEx

    今天给大家介绍一个开源.net混淆器——ConfuserEx http://yck1509.github.io/ConfuserEx/ 由于项目中要用到.net 混淆器,网上搜寻了很多款,比如Dotf ...

  8. CKEditor的使用方法

    CKEditor的使用方法 2014-03-31 09:44 8649人阅读 评论(1) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. ckeditor 的官方网站是 http:/ ...

  9. thinkphp 模板里a标签 href 带参数的 使用U函数方法

    简单的说就是模板里 分类的链接地址 实现这个样子的 <a href="/index.php/Home/Category/assortment/cateid/2.html"&g ...

  10. ElasticSearch之一——索引

    ElasticSearch索引 ElasticSearch 是一个分布式可扩展的实时搜索引擎,它建立在开源搜索引擎框架Apache Lucene基础上.ElasticSearch 不但包括了全文搜索功 ...