bootstrap3的新增和修改的btn-*用法

最新推荐文章于 2023-10-11 10:21:17 发布
最新推荐文章于 2023-10-11 10:21:17 发布
阅读量3.3k 收藏 3
点赞数 1
文章标签： btn-lg btn-xs btn-sm btn-group- btn btn-default
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling811/article/details/16920559
版权

1、新增的btn-*按钮：btn-group-lg、btn-group-xs、btn-group-sm，这三个是按钮组的大小

      修改后的按钮属性：

       2.*版                  3.0版

 .btn                     .btn .btn-default

.btn-mini    .btn-xs
.btn-small    .btn-sm
.btn-large    .btn-lg
使用btn-default的时候要注意，必须要结合btn使用比如：<button type="button" class="btn btn-default"> 要不btn-default会不起效果。当然 btn 可单独用

2、实验代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css" >
<script src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>

<body style="margin:100px">
<div class="container">
	<button type="button" class="btn btn-default">
    	 btn btn-default
    </button>
    <button type="button" class="btn-lg">
    	  <span class="glyphicon glyphicon-star"></span> btn-lg
    </button>
    <button type="button" class="btn-xs">
    	  <span class="glyphicon glyphicon-star"></span> btn-xs
    </button>
    <button type="button" class="btn-sm">
    	  <span class="glyphicon glyphicon-star"></span> btn-sm
    </button>
    <button type="button" class="btn-group-lg">
    	  <span class="glyphicon glyphicon-star"></span> btn-group-lg
    </button>
    <button type="button" class="btn-group-xs">
    	  <span class="glyphicon glyphicon-star"></span> btn-group-xs
    </button>
    <button type="button" class="btn-group-sm">
    	  <span class="glyphicon glyphicon-star"></span> btn-group-sm
    </button>
</div>
</body>

3、效果图：


依然那么楞
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap table使用方法记录
08-29
Bootstrap Table 使用方法记录 Bootstrap Table 是一个基于 Bootstrap 框架的表格插件，提供了丰富的表格样式和交互功能。本文将详细介绍 Bootstrap Table 的使用方法，包括基本使用、样式定制、事件处理等方面的...
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
10-18
使用Bootstrap的`btn`类为按钮设置样式，`data-toggle`和`data-target`属性用于触发模态框（用于新增操作）。`@click`事件绑定Vue.js的方法，例如`saveRows`和`delRows`。 ```html <div class="row mx-auto w-75"> ...
【 掌握Bootstrap组件的添加：按钮】
青衣小屋
03-14 1861
掌握Bootstrap组件的添加：按钮使用Bootstrap的按钮样式Bookstores准备一、效果图二、实现代码三、完整代码 使用Bootstrap的按钮样式 使用Bootstrap的按钮样式非常简单，只需要在button中引入对应的class即可 Bookstores准备 引入Bootstrap的css样式 <!-- 引入Bootstrap的css样式 --> <link rel="stylesheet" href="css/bootstrap.min.css"/>
前台bootstrap按钮动态添加与删除
weixin_30376453的博客
07-17 1402
1.动态添加与删除按钮 initCourse: function(){ $("#add").click(function(){ addCourse(this,courseInfosMax); }); function addCourse(obj,sm){ $('#courseInfos').append( '<div>'+ ...
添加btn-block class 到Bootstrap按钮
qq_37499398的博客
05-17 4990
Create a Block Element Bootstrap Button通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。这张图阐述了行内元素与块级元素的区别：注意，这些按钮仍然需要 btn class。添加Bootstrap的 btn-block class 到你的按钮...
Bootstrap学习入门（9）--bootstrap中的按钮
f45056231p的博客
07-07 1399
Bootstrap学习入门（9）--bootstrap中的按钮在任何的网页中, 我们都会经常性的使用一些按钮, 不管是那种展现方式的. 一个好的样式按钮, 才能给网站带来不一样的美感. 下面看一下bootstrap中的按钮吧. Let's go!!1、在bootstrap中, 按钮(button)有不同的六种方式. 默认的button的样式是: btn. 这个是必要的样式. 还有其他的六种不同方式...
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
m0_69034993的博客
11-07 4967
使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
bootstrap table表格使用方法详解
11-29
以下是对 `bootstrap table` 使用方法的详细解析： 1. **引入依赖**： 在使用 Bootstrap Table 之前，你需要引入相关的 CSS 和 JavaScript 文件。这包括 Bootstrap 的基础样式文件（`bootstrap.min.css` 和 `...
bootstrap-select-1.12.4
01-20
6. **事件与方法**：Bootstrap Select提供了一系列的事件，如`changed.bs.select`（选项改变时触发）和`loaded.bs.select`（数据加载完成时触发）。同时，也提供了一些实用的方法，如`selectpicker('refresh')`...
Bootstrap的按钮和按钮组设计
最新发布
昊虹AI笔记
10-11 1768
Bootstrap的按钮和按钮组设计
Bootstrap 按钮详解
读万卷书，行万里路
04-27 6671
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于&lt;a&gt;, &lt;button&gt;, 或 &lt;input&gt; 元素上： class 说明 .btn 添加基本样式 .btn-default 默认/标准按钮 .btn...
【BootStrap】基本样式、组件与插件
漆黑梦工厂
12-04 450
按钮 可用于按钮元素< button > 超链元素< a > 按钮类型的input元素 < input type=“button”> 提交类型的input元素 < input type=“submit”> 重置类型的input元素 < input type=“reset”> 原始样式按钮：btn 默认按钮：btn btn-default 提交按钮：btn btn-primary 成功按钮：btn btn-success 信息按钮：btn btn-
Bootstrap—基础样式定义
weixin_30483697的博客
09-06 208
本章主要是介绍Bootstrap默认的基础样式定义，利用这些基础的定义相互组合，完成页面的整体风格定义甚至是更具体的效果。 Bootstrap应该是一个基础工具，它的好处在于已经帮你定义了一个基础的样式风格，对一个网站来说，风格统一的页面们是相当重要的（除非你的站点已经复杂到需要做一些定制化的页面）；还解决了主流浏览器兼容问题。但对于国内的使用者来说，存在一个比较严重的问题——并不支持I...
响应式前端框架Bootstrap系列（7）按钮
@黄小泽的个人博客
01-12 3183
按钮是前端最常用到的组件，bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。 独立按钮，可用于, , 或 元素上。 （1）颜色样式： .btn-default：默认/标准按钮 .btn-primary：主要 .btn-success：成功 .btn-info：信息 .btn-warning：警告 .btn-danger：危险 演示代码： 默认按钮 原始按钮
2.7 Bootstrap 按钮
梁辰兴的博客
07-02 371
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。您可以在 、 或 元素上使用按钮 class。但是建议您在 元素上使用按钮 class，避免跨浏览器的不一致性问题。Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
bootstrap table点击修改按钮给弹框赋值
祈澈菇凉
10-26 1041
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link ...
Bootstrap之按钮
qq_44193048的博客
05-05 1288
Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式 btn 为按钮添加基本样式 btn-default 默认/标准按钮 btn-primary 原始按钮 btn-success 成功按钮 btn-info 信息按钮 btn-warning 警告按钮 btn-danger 危险按钮 btn-l...
Bootstrap 按钮
编辑编辑器
03-09 1086
Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于a, button, 或 input 元素上： 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式（未被操作） .btn-success 表示成功的动作 .btn-inf
手机端btn样式
weixin_43565197的博客
08-08 97
手机端btn样式
BootStrap前端框架入门：btn-toolbar按扭组解析
该资源主要介绍了BootStrap前端框架中的btn-toolbar按钮组的使用方法，以及BootStrap的基础知识和特点。通过btn-toolbar，开发者可以在网页中创建分组的按钮，实现更美观和功能丰富的用户界面。 Bootstrap是Twitter...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值