【08】Bootstrap — 按钮

最新推荐文章于 2021-07-08 18:49:33 发布
最新推荐文章于 2021-07-08 18:49:33 发布
阅读量253 收藏
点赞数
文章标签： bootstrap 按钮 button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/77842390
版权

可作为按钮使用的标签或元素

<!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-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <a class="btn btn-default" href="#" role="button">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
    </body>
</html>

作为按钮使用的标签或元素

预定义样式

<!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-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <!-- Standard button -->
        <button type="button" class="btn btn-default">Default</button>
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>
        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>
        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">Info</button>
        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>
        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>
        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">Link</button>
    </body>
</html>

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-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <p>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
            <button type="button" class="btn btn-default btn-lg">Large button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">Default button</button>
            <button type="button" class="btn btn-default">Default button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">Small button</button>
            <button type="button" class="btn btn-default btn-sm">Small button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
            <button type="button" class="btn btn-default btn-xs">Extra small button</button>
        </p>
        <hr/>
        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
        <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    </body>
</html>

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-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
        <button type="button" class="btn btn-default btn-lg active">Button</button>
    </body>
</html>

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-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding: 20px;">
        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
        <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
        <hr/>
        <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
        <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
    </body>
</html>

bootstrap按钮禁用状态

有心博客
关注
Bootstrap入门七：按钮
aochou19810706的博客
05-03 210
1.可作为按钮使用的标签或元素 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 <a class="btn btn-default" href="#" role="button">Link</a> <button class=...
4月8日 笔记
wangjianxin1234的博客
04-08 205
栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。移动设备优先在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。布局容器Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padd...
用div与button标签作为按钮的一些区别
hhthht8888的博客
01-19 1万+
如果button在form表单内部，则可以不用JS绑定onclick属性就可以提交表单内容； 而如果不在form表单内部，又不考虑语义化，那么作为按钮，用div和button来写按钮似乎就没什么太多的区别，只存在一些外观上的细微区别。 button标签的外观如下： 下面分别对button和div进行同样的css修饰： &lt;!DOCTYPE html&gt; &lt;html lang="en...
html哪种做按钮,【前端】HTML中最适合做按钮的元素
weixin_39589693的博客
07-08 435
可选的可以做按钮的元素有如下几个a、input、button、div(span等)场景一：需要禁用此按钮在此场景下可以排除a和div(span等)标签，因为想禁用和解禁它们真的非常困难。场景二：需要在form里自定义执行事件在form元素内，button默认是submit。但是button也有type属性，默认值是submit，还有其他两个值是button和reset。如果设置成button，就是...
Bootstrap按钮元素使用方法
我的web前端学习
01-16 2254
Bootstrap按钮元素样式 Bootstrap中，总共提供了六种按钮样式，分别是默认、主要、成功、信息、警告以及危险这几个样式，它们对应的类分别是btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger。 对应的颜色分别是白色、深蓝、绿色、浅蓝、橙色以及红色。 这几种颜色基本上满足大部分使用需求，当然，如果
Bootstrap 按钮
12-14
Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于, , 或...
详解Bootstrap按钮
09-02
本文将深入探讨Bootstrap按钮的相关知识，包括按钮大小、按钮状态以及按钮标签的样式定义。 **按钮大小** Bootstrap框架提供了三种预设的按钮尺寸，可以方便地适应不同的布局需求： 1. `.btn-lg`（大按钮）：用于...
Bootstrap按钮组简单实现代码
08-31
Bootstrap按钮组简单实现代码 Bootstrap按钮组是Bootstrap框架中的一种常用UI组件，用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap...
Bootstrap按钮下拉菜单组件详解
09-02
Bootstrap按钮下拉菜单组件是网页设计中常用的交互元素，它为用户提供了一种高效的方式来展示多个相关的操作选项。这个组件基于Bootstrap框架，一个流行的前端开发工具包，它简化了网页的布局和样式设计。在...
bootstrap按钮颜色.txt
03-12
bootstrap样式按钮颜色(剩下的都是凑字数真的没什么可介绍的
HTML基础一 测试题
qq_37169559的博客
11-06 5881
HTML5 一、单选题（共30题，每题2分） 得分：2.0分 1. 下面关于外部样式表的说法错误的是 A 文件扩展名为 .cs B 外部样式表内容不需要使用<style>标签 C 使用<link>标签引入外部样式 D 使用外部样式表可以使网站更加简洁，风格保持统一 正确答案: A 解析: 文件扩展名为 .css 得分：2...
html中常见的标签及作用
热门推荐
摸鱼的博客
07-01 1万+
1.<title> <title>元素可定义文档的标题。 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。   2.<head> <head> 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏...
Bootstrap 全局CSS样式： 按钮类的使用
WangMin@汪末末
09-01 780
作者: WangMin 格言: 努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 可作为按钮使用的标签或元素 为<a>、<button>或<input>元素添加按钮类（button class）都可使用 Bootstrap 提供的样式。 <a href="" class="btn btn-default" role="button">link 链接</a> <button class="btn btn-def
Bootstrap按钮
杨哥的博客
05-16 424
按钮 可作为按钮使用的标签或元素 为 、 或  元素添加按钮类（button class）即可使用 Bootstrap 提供的样式 XXX 按钮 <!--单个切换，加上 data-toggle="button"之后 点击之后就有被选中效果，只有再次点击按钮才能解除选中效果。
bootstrap中的按钮的使用（样式表）
lumot的博客
09-20 981
可作为按钮使用的标签或元素 为 <a>、 <button>或 <input>元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 Link 复制 <a...
Bootstrap之表格，按钮，表单和图片的样式
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-06 6887
Bootstrap之表格，按钮，表单和图片的样式本文中，都是结合本人的学习Bootstrap时所做的练习，来理解通过内置的 CSS 定义，Bootstrap的表格，按钮，表单和图片是如何来显示各种丰富效果的。 一. 表格 基本格式<table class="table">
11.30课堂笔记、作业
huqiang0816的博客
11-30 376
11.30课堂笔记1、bootstrap基础1.1 简介HTML5文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在项目中的每个页面都要参照下面的格式进行设置。<!DOCTYPE html> <html lang="zh-CN"> ... </html>移动设备优先Bootstrap 3 重写了整个框架，使其一开始就是对移动设备友好
三维重建-基于Matlab实现结构光三维重建算法-优质项目分享.zip
最新发布
10-17
三维重建_基于Matlab实现结构光三维重建算法_优质项目分享
云网络验证系统云验证+卡密生成+多应用多用户管理
10-17
云网络验证系统云验证，多样化应用管理方式，多种项目任你开发，分布式应用开关，让您的应用开发更简单，本系统借鉴于易如意API写法及思路，完美实现多用户多应用管理。 源码特色 1，对接：详细的API文档，各种语言对接示例让您的接入更加简单 2，安全：客户端与服务器双向效验，动态数据加密，让您的数据“动起来” 3，API：各种API尽情对接，让您的应用大放光彩 4，快捷：后台一键式开关，应用版本，远程更新，更新内容等，让您更快捷更省心 5，功能：丰富的功能，各类数据统计，人性化的体验，满足您的更多需求 6，其他：内置商城、聊天室、工单等，我们将致力于给您最好的体验，如有任何问题都可以向我们反馈 支持多应用卡密生成 卡密生成 单码卡密 次数卡密 会员卡密 积分卡密 卡密管理 卡密长度 卡密封禁 批量生成 批量导出 自定义卡密前缀等 支持多应用多用户管理 应用备注 应用版本 多级代理价格 免费付费切换 验证用户IP 验证用户设备 应用开关等
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值