按钮

基类

-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. 重启nginx

    在env/nginx/sbin目录下输入:nginx,即可重启

  2. /MD, /MT, /LD (Use Run-Time Library)

    https://msdn.microsoft.com/en-us/library/2kzt1wy3.aspx

  3. jQM基本代码

    <div data-role="page"> <div data-role="header" data-position="fixe ...

  4. xcode 不显示占用内存

    解决办法: Scheme设置中,将 Enable Zombie Objects 勾选去掉.

  5. 轻量级router[类似laravel router]

    github地址:https://github.com/NoahBuscher/Macaw/blob/master/Macaw.php 代码加上一些注释,方便以后再看. <?php namesp ...

  6. JavaScript 函数参数传递到底是值传递还是引用传递

    tips:这篇文章是听了四脚猫的js课程后查的,深入的理解可以参看两篇博客: JavaScript数据类型--值类型和引用类型 JavaScript数据操作--原始值和引用值的操作本质 在传统的观念里 ...

  7. nginx 日志切割

    #!/usr/bin/python #-*-coding:UTF-8-*- import time import os logdir='/data/log/nginx' nginxpath='XX/l ...

  8. JS URL传递中文参数时出现乱码的处理

    在浏览器中显示的地址是这样的: 但是按F12调试的时候的地址却变化掉了: 这个肯定是是因为浏览器对url路径默认编码了.这个问题是在我们去取值的时候,得到的就是后面那一大串稀奇古怪的东西.得不到我们想 ...

  9. SqlServer代理执行[分发清除: distribution] 无法删除快照文件

    每天偶尔检查数据库作业是否失败,发现有错误 select top 10 job_id,run_date,run_time,run_duration,step_name,message from  ms ...

  10. MySQL配置文件my.cnf中文详解附mysql性能优化方法分享

    Mysql参数优化对于新手来讲,是比较难懂的东西,其实这个参数优化,是个很复杂的东西,对于不同的网站,及其在线量,访问量,帖子数量,网络情况,以及机器硬件配置都有关系,优化不可能一次性完成,需要不断的 ...