<!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. java调用C/C++写的dll（转）

    源:java调用C/C++写的dll Java语言本身具有跨平台性,如果通过Java调用DLL的技术方便易用,使用Java开发前台界面可以更快速,也能带来跨平台性. Java调用C/C++写好的DLL ...

  2. iOS学习笔记（十三）——获取手机信息（UIDevice、NSBundle、NSLocale）

    iOS的APP的应用开发的过程中,有时为了bug跟踪或者获取用反馈的需要自动收集用户设备.系统信息.应用信息等等,这些信息方便开发者诊断问题,当然这些信息是用户的非隐私信息,是通过开发api可以获取到 ...

  3. 关于浏览器和HTTP协议

    关于浏览器 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示想要访问的网络资源.这里资源一般是指 HTML 文档,图片等其他的类型.资源的位置由用户使用 URL(统一资源标示符)指定. 而浏览 ...

  4. C#常用网址

    C# 编程指南 https://msdn.microsoft.com/zh-cn/library/67ef8sbd.aspx

  5. Docker学习计划

    刚开始学习Docker的时候,找资料在网上看到最多的是Docker的好处.比如: 1.Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得多 2.Docker 对系统资源的利用率很高, ...

  6. bzoj1468

    1468: Tree Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1023  Solved: 532[Submit][Status][Discuss] ...

  7. [UT]Unit Test理解

    Coding中有一个原则:Test Driven Development.  UT中的一些基本概念: 1. 测试驱动 2. 测试桩 3. 测试覆盖 4. 覆盖率 单体测试内容: 1. 模块接口:测试模 ...

  8. vim列编辑

    命令模式下:ctrl + v(我在gvim,win7中是ctrl +shift + q)进入列编辑模,选中要编辑的行(j 上,k下) 输入 “I” (大写的 I,光标定位到选中的第一行),输入要编辑的 ...

  9. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  10. 滚动视图（ScrollView）的功能与用法

    滚动视图ScrollView由FrameLayout派生而出,它就是一个用于为普通组件添加滚动条的组件.ScrollView里最多只能包含一个组件,而ScrollVew的作用就是为该组件添加垂直滚动条 ...