按钮

基类

-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. Python 系列：1 - Tuples and Sequences

    5.3 Tuples and Sequences We saw that lists and strings have many common properties, e.g., indexing a ...

  2. JAVA中的聚集和组合的区别和联系

    选自<JAVA语言程序设计-基础篇(原书第8版)> 定义:一个对象可以包含另一个对象.这两个对象之间的关系称为组合(composition). 组合实际上是聚集关系的一种特殊形式.聚集模拟 ...

  3. 关于win10输入法问题（打不出中文）解决方法

    提问过windous10打不出字,通过安装第三方输入法和所有有关切换的快捷键都没用,现在找到了解决方法 win键+x,打开命令提示符,输入ctfmon,回车 这样就能看到桌面右下角的输入法上面的叉叉消 ...

  4. osharp3 整合 dbcontextscope 文章2 将dbcontext的创建收回到ioc管理

    osharp3 整合 dbcontextscope 后,,dbcontextscope 对dbcontext管理的很好,做到,用到时创建,不用时销毁,下面看一个 trace aspx.page: En ...

  5. Spring中加载xml配置文件的六种方式

    Spring中加载xml配置文件的六种方式 博客分类: Spring&EJB XMLSpringWebBeanBlog  因为目前正在从事一个项目,项目中一个需求就是所有的功能都是插件的形式装 ...

  6. WebGrid Helper with Check All Checkboxes

    WebGrid Helper with Check All Checkboxes myEvernote Link Tuesday, September 13, 2011ASP.NET ASP.NET ...

  7. 在CentOS上搭建apache和PHP服务器环境（转）

    1.您也可以使用一键自动部署环境的工具,请参见网友开发的这个工具 http://www.centos.bz/2013/08/ezhttp-tutorial/ 2. 安装: wget -c http:/ ...

  8. 异步编程中的最佳做法（async await）

    阅读1:http://blog.csdn.net/nacl025/article/details/9163495 阅读2:http://www.cnblogs.com/x-xk/archive/201 ...

  9. css3实现渐变的iPhone滑动解锁效果

    先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...

  10. localdomain的linux域

    both和and的区别? both强调(两者)都,用于肯定语气, and字面意思是"和,而且",是用于表示并列关系的句子,通常位于最后两个人或物之间,将将人物串联起来 如: thi ...