<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

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

    <!-- 移动端视口的设置 -->

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

    <!-- 引入bootstrap.css -->

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

    <style>

        #login{

            width:400px;

        }

    </style>

</head>

<body>

<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>

    /*

         按钮

             基类

                 -  btn

             样式

                 -  btn-default(默认)

                 -  btn-link(链接)

             大小

                 -  btn-*[lg,sm,xs]

             状态

                 -  active

                 -  disabled

            种类

                -  a,input,button

            块级

                -  btn-block

            按钮组

                -  btn-grounp

                -  btn-grounp-justified

                -  btn-grounp-veritcal

     */

</script>

bootstrap - btn的更多相关文章

  1. bootstrap - btn 实例

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 第二百三十三节，Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表格 Bootstrap ...

  3. Require,js配置使用心得

    首先大家要知道requirejs是干嘛用的,要解释,那就用一句话说下:RequireJS是一个JavaScript文件和模块加载器接下来我们开始学会配置使用requireJs,当然在学习使用的过程中也 ...

  4. table2excel使用

    原table2excel代码 /* * 采用jquery模板插件——jQuery Boilerplate * * Made by QuJun * 2017/01/10 */ //table2excel ...

  5. AngularJS 笔记1

    2017-03-23 本文更新链接: http://www.cnblogs.com/daysme/p/6606805.html 什么是 angularjs 2009年有两个外国人创建,后由谷歌收购并开 ...

  6. jeecg中列表查询数据关联其他表的显示

    1.A表字段:id,name;B表字段:id,name,fid(A表外键),现查询A表和B表的所有数据并且查询条件A,B都有,在前台页面list显示 2.后台方法: @RequestMapping(p ...

  7. BootStrap 关于input与btn的点击focus取消特效相关css

    取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...

  8. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  9. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. PHP PSR 代码风格

    FIG组织在制定跟PHP相关规范,简称PSR,PSR旨在通过讨论我们代码项目的共同点以找出一个协作编程的方法. 什么是psr0 强调自动加载的方式 下文描述了若要使用一个通用的自动加载器(autolo ...

  2. Delphi Math里的基本函数，以及浮点数比较函数（转）

    源:Delphi Math里的基本函数,以及浮点数比较函数 Delphi里的好东西太多,多到让人觉得烦.这种感觉就是当年打游戏<英雄无敌3>,改了钱以后,有钱了每天都要造建筑,明明是好事, ...

  3. HTML5 EventSource的用法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. java实现——035第一个只出现一次的字符

    import java.util.Hashtable; public class T035 { public static void main(String[] args) { FirstNotRep ...

  5. Android滚动选择控件

    现在觉得github特别方便,我一般直接使用github中的内容, https://github.com/wangjiegulu/WheelView 这里面都有详细的介绍

  6. java 读写excle

    2014-04-16 20:38:20 java读写excel 晚上打算研究如何c来编写

  7. 【转】sql语句的优化分析

    开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索 ...

  8. Eclipse tomcat插件

    1. 下载 http://www.eclipsetotale.com/tomcatPlugin.html 2. 解压 解压到Eclipse_Home/dropins 3. 重启Eclipse

  9. js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素

    <html> <head> <script type="text/javascript"> window.onload = function() ...

  10. HTTP协议缓存策略深入详解之ETAG妙用

    Etag是什么: Etag 是URL的Entity Tag,用于标示URL对象是否改变,区分不同语言和Session等等.具体内部含义是使服务器控制的,就像Cookie那样. HTTP协议规格说明定义 ...