bootstrap按钮

按钮

基类

-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>
时间: 2024-09-30 04:48:31

bootstrap按钮的相关文章

BootStrap 按钮组简单介绍

学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdown-menu 和属性 data-toggle="dropdown"; 1:基本按钮组,仅仅一个 btn-group 就 OK 了. 1 <span class="btn-group " > 2 <button class="btn btn-p

Bootstrap 按钮,图片,辅助类

Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <button>, 或 <input> 元素上: 类 描述 实例 .btn 为按钮添加基本样式 尝试一下 .btn-default 默认/标准按钮 尝试一下 .btn-primary 原始按钮样式(未被操作) 尝试一下 .btn-success 表示成功的动作 尝试一下 .bt

Bootstrap按钮插件

前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息.例如,点击"加载"按钮,会触发按钮的加载的状态 通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了 [注意]如果不

bootstrap按钮组

种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div> <div class="btn-group"> <button class="btn btn-primary">按钮2</button> </div> <div class="btn-group&

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上,当您想要把按钮对齐在一起时,使用按钮组就显得非常有用了. 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述 代码示例 .btn-group 该 class 用于形成基本的按钮组.在 .btn-group 中放置一系列带有 class .btn 的按钮. <div class="btn-group"> <button type="button" class=&quo

bootstrap按钮组(一)

按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等.那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件. 源码查询: 按钮组也是一个独立的组件,所以可以找到对应的源码文件: LESS版本:对应的源文件为buttons.less Sass版本:对应的源文件为_buttons.scss CSS版本:对应bootstrap.css文件第3131行-第3291行 使用方法: 按钮

详解Bootstrap按钮组件(二)

按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 按钮下拉菜单 <span class="caret">

Bootstrap按钮组和工具栏

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

Bootstrap按钮组学习

简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角). 确保设置正确的 role 属性并提供一个 label 标签 为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合