<!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. lPC1788的串口通讯

    #ifndef __DEBUGSERIAL_H_ #define __DEBUGSERIAL_H_ #include "sys.h" #include "stdio.h& ...

  2. Yii -- framework 目录结构说明

    base 底层的类库文件 caching 所有缓存方法 cli 项目生成脚本 collecions 用PHP语言构造传统OO语言的数据存储单元.如队列,栈,哈希等等 console yii控制台 db ...

  3. Matlab笔记

    提取RGB分量,并显示出来 rgb=imread('mao.jpg'); rgb_r=rgb(:,:,); rgb_g=rgb(:,:,); rgb_b=rgb(:,:,); zero=zeros(, ...

  4. C#的逆变和协变

    out: 输出(作为结果),in:输入(作为参数) 所以如果有一个泛型参数标记为out,则代表它是用来输出的,只能作为结果返回,而如果有一个泛型参数标记为in,则代表它是用来输入的,也就是它只能作为参 ...

  5. 《Web接口开发与自动化测试 -- 基于Python语言》 ---前言

    前    言 本书的原型是我整理一份Django学习文档,从事软件测试工作的这六.七年来,一直有整理学习资料的习惯,这种学习理解再输出的方式对我非常受用,博客和文档是我主要的输出形式,这些输出同时也帮 ...

  6. jquery $提示缺少对象$提示缺少对象

    jquery $提示缺少对象 项目中存在不同版本的jquery,有1.4也有1.2, 之前运行项目不会报错 " $提示缺少对象 ",但是我的IE9重置之后就报错,从网上找了一大堆, ...

  7. EF 实体字段设置主键和自增

    [Key] //主键 [DatabaseGenerated(DatabaseGeneratedOption.Identity)] //设置自增 public int id { get; set; } ...

  8. 【Xilinx-Petalinux学习】-04-OpenCV的移植

    交叉编译PC平台 VMware12, CentOS 6.5 32 bit 在VMware中安装CentOS,用户名:xilinx-arm-opencv 密码:root 至于这里为什么用CentOS,而 ...

  9. SQL SERVER 2000 数据恢复（分离数据库+附加数据库）

    一.分离数据库     SQL Server 2000允许分离数据库的数据和事务日志文件,然后将其重新附加到同一台或另一台服务器上.分离数据库将从SQL Server 删除数据库,所以当点击“分离数据 ...

  10. 温故知新 javascript 正则表达式

    很长时间没看 正则表达式了,碰巧今天用到,温故知新了一把 看书学习吧 50% 的举一反三练习中的原创.   一 javascript正则表达式的基本知识 1     javascript 正则对象创建 ...