<!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. iOS自定义字体及类目

    1:获取字体文件 从各种渠道下载字体文件ttf, 网站或者从别的ipa里扣出来.(以fzltxh.ttf为例) 2:将fzltxh.ttf文件拷贝到工程中 3:在Info.plist中添加项: Fon ...

  2. USB那点事3 -使用端口2作为custom HID的传输（转）

    源:USB那点事3 -使用端口2作为custom HID的传输 USB custom HID例子中是使用了端口1作为通信,那么现在我使用端口2作为通信端了,该如何修改呢?如下所示: 首先修改:usb_ ...

  3. MVP学习笔记——参考Google官方demo

    demo地址:https://github.com/googlesamples/android-architecture 在这个项目里,每个包的分工都很明确,大体上来说,一个包会对应一个界面.一个界面 ...

  4. java中的Set的使用以及各种遍历方法（较为全面）

    1. 概述 Java 中的Set和正好和数学上直观的集(set)的概念是相同的.Set最大的特性就是不允许在其中存放的元素是重复的.根据这个特点,我们就可以使用Set 这个接口来实现前面提到的关于商品 ...

  5. 家用计费系统ER图

    家用计费系统研发开始.在此记录自己的开发过程.

  6. LINUX 无法登入系统（2017-1-16）

    很好的博文:http://blog.csdn.net/caizi001/article/details/38659189

  7. nginx 重启

    /etc/init.d/nginx -s reload /etc/init.d/nginx reload

  8. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  9. HDU-1996-汉诺塔VI

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1996 其实它就是求移动的所有可能,也就是n个盘子摆在三个塔上的任何可能的种数.可以这么思考这个问题:n ...

  10. HDFS存储系统

    HDFS存储系统 一.基本概念 1.NameNode HDFS采用Master/Slave架构.namenode就是HDFS的Master架构.主要负责HDFS文件系统的管理工作,具体包括:名称空间( ...