简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

为Bootstrap按钮添加尺寸

PHPz
发布： 2023-08-20 16:29:14
转载
988 人浏览过

为Bootstrap按钮添加尺寸

为了在Bootstrap中为按钮添加大小，可以尝试以下类：

类

 描述
.btn-lg

 这会使按钮变大。
.btn-sm

 这会使按钮变小。
.btn-xs

 这会使按钮变得特别小。
.btn-block

 这会创建块级按钮，即占据父元素的整个宽度。

示例

您可以尝试运行以下代码来创建一个小按钮 −

演示

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <button type = "button" class = "btn btn-default btn-sm">
         Small button
      </button>
   </body>
</html>
登录后复制

以上是为Bootstrap按钮添加尺寸的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
bootstrap 按钮 尺寸
来源：tutorialspoint.com
上一篇：HTML DOM Input Reset disabled 属性 HTML DOM Input Reset disabled 属性用于设置或获取重置按钮是否被禁用 下一篇：如何在HTML中设置单元格内边距？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
比较Imagick、Adobe Photoshop和Windows - 检测分辨率（每厘米像素或每英寸像素） 这不是问题，而是试图提高我对DPI如何以各种文件格式存储的理解，并讨论其工作原理的原因。我对图像（JPG、PNG和Tiff）进行了大量工作并检测它们的分辨率。例如，我可以在Imag...
来自于 2024-04-06 16:01:27
0
1
397
父级的填充被粘性定位的子级忽略 如何防止粘性元素进入标题后面？当前代码片段在父级上使用填充顶部，我也尝试在额外的子级上使用margin-top或透明50px边框，但它似乎不起作用。我知道在这种情况下我可以轻松地在...
来自于 2024-04-06 11:42:51
0
1
338
我如何调整这些卡，使其能够使用 Boostrap 4 做出响应？ 如何让每个row显示4张卡片，当然，如果屏幕尺寸发生变化，则使它们堆叠起来。理想情况下，它们之间应该有一些空间。我已经尝试了我能研究的所有可能的组合。#cardsContainer...
来自于 2024-04-05 10:48:45
0
1
4072
在手机尺寸屏幕上，如何将段落向左移动的CSS和HTML方法 在正常的16:9电脑屏幕上看起来很完美，文字在左边，图片在右边。但是，当涉及到较小的屏幕（例如手机尺寸的屏幕）时，它确实会像我想要的那样在段落顶部显示图片。我对此很陌生，所以请帮忙...
来自于 2024-04-04 20:25:22
0
1
330
重新写的标题：在改变大小的情况下，水平和垂直居中一个固定的HTML方形或圆形元素 如何使尺寸变化的方形或圆形固定html元素水平和垂直居中？我认为宽度和高度必须保持相等这一事实带来了困难。
来自于 2024-04-04 12:31:51
0
1
322
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！