看程序学bootstrap2-基本样式之按钮

最新推荐文章于 2020-02-02 18:48:57 发布
最新推荐文章于 2020-02-02 18:48:57 发布
阅读量144 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/93506771
版权

按钮样式 可以用于
按钮元素
超链元素
按钮类型的input元素
提交类型的input元素
重置类型的input元素
示例 1 : 原始样式按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn">原始样式按钮</button>

示例 2 : 默认按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-default">默认按钮</button>

示例 3 : 提交按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-primary">提交按钮</button>

示例 4 : 成功按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-success">成功按钮</button>

示例 5 : 信息按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-info">信息按钮</button>

示例 6 : 警告按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-warning">警告按钮</button>
试一下

示例 7 : 危险按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-danger">危险按钮</button>

示例 8 : 表现为链接

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-link">表现为链接</button>

示例 9 : 大一点的按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-lg">大一点的按钮</button>

示例 10 : 小一点的按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-sm">小一点的按钮</button>

示例 11 : 最小的按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-xs">最小的按钮</button>

示例 12 : 宽屏按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn btn-block">宽屏按钮</button>

示例 13 : 激活状态按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn active">激活状态按钮</button>

示例 14 : 无效按钮

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn disabled">领红包</button>

示例 15 : 多种按钮样式混用

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button type="button" class="btn disabled btn-danger btn-xs">发红包</button>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap之button样式
xixi
10-29 6872
一、前言现在开始介绍bootstrap的button模块样式，包括buttons.less、button-groups.less。二、源码1、buttons.less1.1、buttons.less源码 // // Buttons(按钮) // -------------------------------------------------- // Base styles(基础样式) //
Bootstrap-button btn样式
weixin_41952920的博客
07-28 1438
Button-按钮 按钮的样式 <button class="btn btn-default">default</button> <button class="btn btn-primary">primary</button> <button class="btn btn-success">success</button> &...
Bootstrap基本css样式--按钮
wangjingyi
02-03 261
[url]http://v2.bootcss.com/base-css.html#buttons[/url] 首先介绍下默认按钮： 任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现 和 页面元素。[url]http://v2.bootcss.com/base-css.html#buttons[/url] [img]http://dl2.iteye.com/upl...
前端学习笔记 bootstrap（一）
云乐
02-02 274
BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。 导入js和css Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js 接着是Bootstrap的css，里面定义了各种样式 最后是Bootstrap的js，用于产生交互效果，比如关闭警告框 注：顺序不要搞错了，否则有一些效果会出不来。 首先是JQuery 然后...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：原始按钮样式（未被操作）
weixin_30426879的博客
05-19 144
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https...
bootstrap中 几个漂亮的按钮样式
热门推荐
u012947276的博客
01-22 1万+
此博文是在菜鸟教程上看到的。 对于初学者很是有帮助，所以把这篇博文放上来，供大家参考。 源课程： http://www.runoob.com/try/try.php?filename=bootstrap-button-example 再附上 文本显示颜色及图表的地址： http://www.runoob.com/try/demo_source/bootstrap-glyph-cu
startbootstrap-sb-admin-2-master
09-26
"startbootstrap-sb-admin-2-master" 是一个广泛使用的后台管理模板，由 StartBootstrap 团队开发。StartBootstrap 是一个开源的 HTML、CSS 和 JavaScript 模板库，它提供了多种预设计的网页模板，帮助开发者快速...
bootstrap-wpf-style-master 样式
08-14
Bootstrap-WPF 样式是一种将流行的前端框架 Bootstrap 的设计风格应用于 WPF（Windows Presentation Foundation）应用程序的方法。Bootstrap 是一个广泛使用的开源工具包，主要用于构建响应式、移动设备优先的网页...
struts2-bootstrap-showcase-1.5.2.zip_Struts2标签库_bootstrap_bootst
09-22
例如，`<s:bootstrap:container>`可以创建一个Bootstrap的容器，`<s:bootstrap:row>`和`<s:bootstrap:column>`用于布局，`<s:bootstrap:button>`用于创建Bootstrap样式的按钮。通过这种方式，开发者能够利用Struts2...
bootstrap-select：使用按钮下拉菜单对@twitter引导程序进行自定义选择（最初由Silvio Moreto进行）
02-01
2. **基本用法**：只需将 `class="selectpicker"` 添加到 `<select>` 元素上，Bootstrap Select 就会自动应用样式和功能。例如： ```html <option>Option 1 <option>Option 2 ``` 3. **多选**：添加 `...
bootstrap-closable-tab tab可关闭组件
06-10
2. **CSS 样式**：为了美观，我们可能需要定制CSS样式，使关闭按钮与Tab整体风格保持一致。这可能涉及到对按钮的定位、大小、颜色、边框等属性进行调整。 3. **JavaScript 事件处理**：关键的逻辑部分是使用...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
bootstrap-fileinput禁用选择文件按钮
06-02
要禁用bootstrap-fileinput的选择文件按钮，你可以使用`disable`方法。具体步骤如下： 1. 在HTML中，添加一个file input元素和一个隐藏的input元素。例如： ```html <input id="file-1" type="file" name="file" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值