Bootscrap 箭头按钮

最新推荐文章于 2024-09-09 09:38:21 发布
最新推荐文章于 2024-09-09 09:38:21 发布
阅读量1.3k 收藏
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShellDawn/article/details/76071296
版权
本文介绍了如何利用Bootstrap框架设计出具有方向指示的按钮，详细讲解了如何应用`bootstrap-directional-buttons.css`来实现这一功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Bootstrap Directional Buttons Demo">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Directional Buttons</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap-directional-buttons.css" rel="stylesheet" type="text/css" />

  <style>
    body{
      padding: 40px;
      padding-top: 0px;
    }
    h4{
      margin-top: 35px;
    }
    h5{
      margin-top: 15px;
    }
    h4, h5{
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h4>Regular Buttons</h4>

  <button type="button" class="btn btn btn-default btn-arrow-left">Default</button>
  <button type="button" class="btn btn btn-primary btn-arrow-left">Primary</button>
  <button type="button" class="btn btn btn-success btn-arrow-left">Success</button>
  <button type="button" class="btn btn btn-link">Link</button>
  <button type="button" class="btn btn-info btn-arrow-right">Info</button>
  <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
  <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>

  <h5>Inside .btn-group</h5>

  <div class='btn-group'>
    <button type="button" class="btn btn-default btn-arrow-left">Default</button>
    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
    <button type="button" class="btn btn-success btn-arrow-left">Success</button>
    <button type="button" class="btn btn-link">Link</button>
    <button type="button" class="btn btn-info btn-arrow-right">Info</button>
    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
  </div> 

  <h4>Large Buttons</h4>

  <button type="button" class="btn btn-lg btn btn-default btn-arrow-left">Default</button>
  <button type="button" class="btn btn-lg btn-primary btn-arrow-left">Primary</button>
  <button type="button" class="btn btn-lg btn-success btn-arrow-left">Success</button>
  <button type="button" class="btn btn-lg btn-link">Link</button>
  <button type="button" class="btn btn-lg btn-info btn-arrow-right">Info</button>
  <button type="button" class="btn btn-lg btn-warning btn-arrow-right">Warning</button>
  <button type="button" class="btn btn-lg btn-danger btn-arrow-right">Danger</button>

  <h5>Inside .btn-group</h5>

  <div class='btn-group btn-group-lg'>
    <button type="button" class="btn btn-default btn-arrow-left">Default</button>
    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
    <button type="button" class="btn btn-success btn-arrow-left">Success</button>
    <button type="button" class="btn btn-link">Link</button>
    <button type="button" class="btn btn-info btn-arrow-right">Info</button>
    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
  </div>

  <h4>Small Buttons</h4>

  <button type="button" class="btn btn-sm btn btn-default btn-arrow-left">Default</button>
  <button type="button" class="btn btn-sm btn-primary btn-arrow-left">Primary</button>
  <button type="button" class="btn btn-sm btn-success btn-arrow-left">Success</button>
  <button type="button" class="btn btn-sm btn-link">Link</button>
  <button type="button" class="btn btn-sm btn-info btn-arrow-right">Info</button>
  <button type="button" class="btn btn-sm btn-warning btn-arrow-right">Warning</button>
  <button type="button" class="btn btn-sm btn-danger btn-arrow-right">Danger</button>

  <h5>Inside .btn-group</h5>

  <div class='btn-group btn-group-sm'>
    <button type="button" class="btn btn btn-default btn-arrow-left">Default</button>
    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
    <button type="button" class="btn btn-success btn-arrow-left">Success</button>
    <button type="button" class="btn btn-link">Link</button>
    <button type="button" class="btn btn-info btn-arrow-right">Info</button>
    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
  </div>

  <h4>Extra Small Buttons</h4>

  <button type="button" class="btn btn-xs btn btn-default btn-arrow-left">Default</button>
  <button type="button" class="btn btn-xs btn-primary btn-arrow-left">Primary</button>
  <button type="button" class="btn btn-xs btn-success btn-arrow-left">Success</button>
  <button type="button" class="btn btn-xs btn-link">Link</button>
  <button type="button" class="btn btn-xs btn-info btn-arrow-right">Info</button>
  <button type="button" class="btn btn-xs btn-warning btn-arrow-right">Warning</button>
  <button type="button" class="btn btn-xs btn-danger btn-arrow-right">Danger</button>

  <h5>Inside .btn-group</h5>

  <div class='btn-group btn-group-xs'>
    <button type="button" class="btn btn-default btn-arrow-left">Default</button>
    <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
    <button type="button" class="btn btn-success btn-arrow-left">Success</button>
    <button type="button" class="btn btn-link">Link</button>
    <button type="button" class="btn btn-info btn-arrow-right">Info</button>
    <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
    <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
  </div>
</body>
</html>

bootstrap-directional-buttons.css

.btn-arrow-right,
.btn-arrow-left {
  position: relative;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 0 !important;
  margin-right: 1px; }
  .btn-arrow-right[disabled],
  .btn-arrow-left[disabled] {
    opacity: 1.00; }
  .btn-arrow-right:before, .btn-arrow-right:after,
  .btn-arrow-left:before,
  .btn-arrow-left:after {
    content: "";
    position: absolute;
    top: 4px;
    /* move it down because of rounded corners */
    height: 24px;
    /* button_inner_height / sqrt(2) */
    width: 24px;
    /* same as height */
    background: inherit;
    /* use parent background */
    border: inherit;
    /* use parent border */
    border-left-color: transparent;
    /* hide left border */
    border-bottom-color: transparent;
    /* hide bottom border */
    border-radius: 0 !important; }
  .btn-arrow-right:before,
  .btn-arrow-left:before {
    left: -13px; }
  .btn-arrow-right:after,
  .btn-arrow-left:after {
    right: -13px; }
  .btn-arrow-right.btn-arrow-left,
  .btn-arrow-left.btn-arrow-left {
    padding-right: 36px; }
    .btn-arrow-right.btn-arrow-left:before, .btn-arrow-right.btn-arrow-left:after,
    .btn-arrow-left.btn-arrow-left:before,
    .btn-arrow-left.btn-arrow-left:after {
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      /* rotate right arrow squares 45 deg to point right */ }
  .btn-arrow-right.btn-arrow-right,
  .btn-arrow-left.btn-arrow-right {
    padding-left: 36px; }
    .btn-arrow-right.btn-arrow-right:before, .btn-arrow-right.btn-arrow-right:after,
    .btn-arrow-left.btn-arrow-right:before,
    .btn-arrow-left.btn-arrow-right:after {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      /* rotate right arrow squares 45 deg to point right */ }

.btn-arrow-right:after,
.btn-arrow-left:before {
  /* bring arrow pointers to front */
  z-index: 3; }

.btn-arrow-right:before,
.btn-arrow-left:after {
  /* hide arrow tails background */
  background-color: white; }

/* Large */
.btn-lg.btn-arrow-right,
.btn-lg.btn-arrow-left,
.btn-group-lg > .btn-arrow-left,
.btn-group-lg > .btn-arrow-right {
  padding-left: 22px;
  padding-right: 22px;
  margin-right: 0px; }
  .btn-lg.btn-arrow-right:before, .btn-lg.btn-arrow-right:after,
  .btn-lg.btn-arrow-left:before,
  .btn-lg.btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-left:before,
  .btn-group-lg > .btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-right:before,
  .btn-group-lg > .btn-arrow-right:after {
    top: 6px;
    /* move it down because of rounded corners */
    height: 32px;
    /* button_inner_height / sqrt(2) */
    width: 32px;
    /* same as height */ }
  .btn-lg.btn-arrow-right:before,
  .btn-lg.btn-arrow-left:before,
  .btn-group-lg > .btn-arrow-left:before,
  .btn-group-lg > .btn-arrow-right:before {
    left: -16px; }
  .btn-lg.btn-arrow-right:after,
  .btn-lg.btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-right:after {
    right: -16px; }
  .btn-lg.btn-arrow-right.btn-arrow-left,
  .btn-lg.btn-arrow-left.btn-arrow-left,
  .btn-group-lg > .btn-arrow-left.btn-arrow-left,
  .btn-group-lg > .btn-arrow-right.btn-arrow-left {
    padding-right: 44px; }
  .btn-lg.btn-arrow-right.btn-arrow-right,
  .btn-lg.btn-arrow-left.btn-arrow-right,
  .btn-group-lg > .btn-arrow-left.btn-arrow-right,
  .btn-group-lg > .btn-arrow-right.btn-arrow-right {
    padding-left: 44px; }

/* Small */
.btn-sm.btn-arrow-right,
.btn-sm.btn-arrow-left,
.btn-group-sm > .btn-arrow-left,
.btn-group-sm > .btn-arrow-right {
  padding-left: 14px;
  padding-right: 14px;
  margin-right: -1px; }
  .btn-sm.btn-arrow-right:before, .btn-sm.btn-arrow-right:after,
  .btn-sm.btn-arrow-left:before,
  .btn-sm.btn-arrow-left:after,
  .btn-group-sm > .btn-arrow-left:before,
  .btn-group-sm > .btn-arrow-left:after,
  .btn-group-sm > .btn-arrow-right:before,
  .btn-group-sm > .btn-arrow-right:after {
    top: 4px;
    /* move it down because of rounded corners */
    height: 20px;
    /* button_inner_height / sqrt(2) */
    width: 20px;
    /* same as height */ }
  .btn-sm.btn-arrow-right:before,
  .btn-sm.btn-arrow-left:before,
  .btn-group-sm > .btn-arrow-left:before,
  .btn-group-sm > .btn-arrow-right:before {
    left: -10px; }
  .btn-sm.btn-arrow-right:after,
  .btn-sm.btn-arrow-left:after,
  .btn-group-sm > .btn-arrow-left:after,
  .btn-group-sm > .btn-arrow-right:after {
    right: -10px; }
  .btn-sm.btn-arrow-right.btn-arrow-left,
  .btn-sm.btn-arrow-left.btn-arrow-left,
  .btn-group-sm > .btn-arrow-left.btn-arrow-left,
  .btn-group-sm > .btn-arrow-right.btn-arrow-left {
    padding-right: 28px; }
  .btn-sm.btn-arrow-right.btn-arrow-right,
  .btn-sm.btn-arrow-left.btn-arrow-right,
  .btn-group-sm > .btn-arrow-left.btn-arrow-right,
  .btn-group-sm > .btn-arrow-right.btn-arrow-right {
    padding-left: 28px; }

/* Extra Small */
.btn-xs.btn-arrow-right,
.btn-xs.btn-arrow-left,
.btn-group-xs > .btn-arrow-left,
.btn-group-xs > .btn-arrow-right {
  padding-left: 10px;
  padding-right: 10px;
  margin-right: -1px; }
  .btn-xs.btn-arrow-right:before, .btn-xs.btn-arrow-right:after,
  .btn-xs.btn-arrow-left:before,
  .btn-xs.btn-arrow-left:after,
  .btn-group-xs > .btn-arrow-left:before,
  .btn-group-xs > .btn-arrow-left:after,
  .btn-group-xs > .btn-arrow-right:before,
  .btn-group-xs > .btn-arrow-right:after {
    top: 3px;
    /* move it down because of rounded corners */
    height: 14px;
    /* button_inner_height / sqrt(2) */
    width: 14px;
    /* same as height */ }
  .btn-xs.btn-arrow-right:before,
  .btn-xs.btn-arrow-left:before,
  .btn-group-xs > .btn-arrow-left:before,
  .btn-group-xs > .btn-arrow-right:before {
    left: -7px; }
  .btn-xs.btn-arrow-right:after,
  .btn-xs.btn-arrow-left:after,
  .btn-group-xs > .btn-arrow-left:after,
  .btn-group-xs > .btn-arrow-right:after {
    right: -7px; }
  .btn-xs.btn-arrow-right.btn-arrow-left,
  .btn-xs.btn-arrow-left.btn-arrow-left,
  .btn-group-xs > .btn-arrow-left.btn-arrow-left,
  .btn-group-xs > .btn-arrow-right.btn-arrow-left {
    padding-right: 20px; }
  .btn-xs.btn-arrow-right.btn-arrow-right,
  .btn-xs.btn-arrow-left.btn-arrow-right,
  .btn-group-xs > .btn-arrow-left.btn-arrow-right,
  .btn-group-xs > .btn-arrow-right.btn-arrow-right {
    padding-left: 20px; }

/* Button Groups */
.btn-group > .btn-arrow-left:hover, .btn-group > .btn-arrow-left:focus,
.btn-group > .btn-arrow-right:hover,
.btn-group > .btn-arrow-right:focus {
  z-index: initial; }

.btn-group > .btn-arrow-right + .btn-arrow-right,
.btn-group > .btn-arrow-left + .btn-arrow-left {
  margin-left: 0px; }

.btn-group > .btn:not(.btn-arrow-right):not(.btn-arrow-left) {
  z-index: 1; }
ShellDawn
关注
bootstrap caret箭头实现
易天海
07-03 2953
<span class="caret"></span> .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top...
详解Bootstrap各式各样的按钮(推荐)
11-27
Bootstrap为我们提供了各式各样漂亮的按钮，我们无需自己给按钮写样式，直接使用它给我们提供的类样式，使用在我们的按钮上，非常的简单方便。 为尊重原创这里贴一下参考的教程：http://www.runoob.com/bootstrap/bootstrap-buttons.html。在我的很多笔记中，您可能会看到我贴的www.runoob.com相关的网址，在这里先声明这不是广告，我只是觉得每个人的劳动成果都应该被尊重。这个网站收集了很多的信息，供我学习，我非常的感激，借鉴于这些很好的教程，我做出自己的总结，归纳知识点，方便自己记忆。假如您在做项目或者学习中，正好需要这方面的知识，然后这篇文
纯CSS3 Bootstrap步骤箭头按钮样式
11-04
纯CSS3 Bootstrap步骤箭头按钮样式 纯CSS3 Bootstrap步骤箭头按钮样式
Bootstrap三角箭头.caret 类
歪脖先生的博客
05-09 4220
三角箭头 为元素添加.caret类，就会为它赋予一个三角符号图标，用来指示某个元素具有下拉菜单的功能。并且，在向上弹出的菜单中，三角符号会自动反向显示。如： <spanclass="caret"></span> 效果如图 2‑83所示： 图2-83 三角符号 关于作者 歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、J...
css向右箭头形状按钮,详解Bootstrap的纯CSS3箭头按钮样式
weixin_29706315的博客
08-04 1340
简要教程这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。安装可以通过npm或bower来安装该Bootstrap箭头按钮文件。npm install bootstrap-directional-buttonsbower install bootstrap-directional-buttons使用方法在页面中引...
Bootstrap箭头步骤CSS3代码
ICode联盟
03-30 391
下载地址 基于Bootstrap的分步骤引导css3代码，可以用作面包屑导航。 dd:
bootstrap步骤条-按钮-箭头样式
12-13
一款基于Bootstrap的纯CSS3步骤条-箭头指向类按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
bootstrap-directional-buttons:引导程序的方向箭头按钮
05-01
自举方向按钮 引导程序的方向/箭头按钮 用法： 只需将类.btn-arrow-left或.btn-arrow-right添加到引导按钮。 在.btn-group内部使用可删除按钮之间的空间。 < button type =" button " class =" btn btn-primary btn-arrow-left " > Left Arrow Button </ button > < button type =" button " class =" btn btn-success btn-arrow-right " > Right Arrow Button </ button > 演示： 安装 纱，NPM，凉亭 yarn add bootstrap-directional-buttons npm install bootstrap-directional-buttons bo
Bootstrap纯CSS3箭头按钮样式
我的博客
05-06 608
这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
基于Bootstrap的纯CSS3箭头按钮样式
12-13
这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
Bootstrap箭头进度条插件纯CSS3动画
ICode联盟
02-19 252
下载地址 纯CSS3动画Bootstrap箭头进度条插件，css3炫酷进度条动画在原生bootstrap进度条的基础上，通过少量的CSS3代码，将进度条美化为箭头样式，并制作动画效果。 dd:
Bootstrap方向箭头按钮组件使用指南
在这篇文档中，我们了解到 Bootstrap 的一个扩展插件，即 bootstrap-directional-buttons，其主要功能是提供方向性箭头按钮，用于增强界面中的导航功能。下面将详细探讨 bootstrap-directional-buttons 的使用方法、...
推荐文章：Bootstrap Arrows - 为你的Bootstrap界面增添箭头魔法！
最新发布
gitblog_00571的博客
09-09 794
推荐文章：Bootstrap Arrows - 为你的Bootstrap界面增添箭头魔法！ Bootstrap-ArrowsA simple add-on to the popular Twitter Bootstrap framework to include the use of arrows in your UI designs.项目地址:https://gitcode.com/gh_mi...
Bootstrap-按钮(1)，快来收藏
m0_75280563的博客
04-03 939
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。[外链图片转存中…(img-N5QGBfd2-1712085404410)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。
bootstrap 下箭头的禁用
qq_37634366的博客
04-18 1122
bootstrap下箭头的禁用使用disabled=”disabled”无效。 解决方式：在CSS中加入如下代码，并且在类名中添加disabled css代码：.caret.disabled , .caret [disabled] { pointer-events: none; cursor: default; } HTML代码<span class="caret disabled" styl
bootstrap datetimepicker的用法以及小箭头不能显示的问题
liuminyi1987的博客
03-20 4271
使用时间控件时需要把CSS和js引用都加上，加上bootstrap-datetimepicker.zh-CN.js在使用的时候才可以选择使用中文。&lt;script type="text/javascript" src="././js/public/bootstrap-datetimepicker.zh-CN.js"&gt;&lt;/script&gt;我使用的是bootstrap-dateti...
CSS：Bootstrap-Button
Schon_zh的博客
10-29 302
样式 &amp;amp;amp;amp;lt;!-- Standard button --&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;button type=&amp;amp;amp;quot;button&amp;amp;amp;quot; class=&amp;amp;amp;quot;btn btn-default&amp;amp;amp;quot;&amp;amp;amp;amp;gt;（默认样式
bootstrap——组件（二、按钮组）
zaichuanguanshui的专栏
01-18 415
1、按钮组.btn-group 把一些按钮放在一个btn-group里面<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <butt
Bootstrap
萌萌的PP博客
08-25 433
一.Bootstrap前奏      1.介绍 官网： http://getbootstrap.com/            中文网： http://www.bootcss.com/ Bootstrap 是一套现成的 CSS 样式集合,界面清新、简洁;要素排版利落大方。Bootstrap 特别适合那种没有设计师的团队（甚至说没有前端的团队），可以快速的出一个网页。      2.特点 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值