html - 向 Bootstrap block 级按钮添加功能-6ren

html - 向 Bootstrap block 级按钮添加功能

转载作者：行者123 更新时间：2023-11-28 04:41:52

我希望网页在单击 Block Level 按钮时向下滚动，如下面的代码片段所示。此外，按钮应在两侧(大写标题的左侧和右侧)显示向下箭头符号

body{
    padding:0px;
    z-index:0;
}

.navbar-inverse {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background: #1A237E;
}

.navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background: #1A237E;
}

footer {
    height: 400px;
    background: #eee;
}

.list-unstyled {
	display: inline-flex;
}

h5 {
	text-transform: uppercase;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0px;
  padding: 10px 16px;
  text-transform: uppercase;
}

<!DOCTYPE html>
<html lang="en">

<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>Task List</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <link rel="stylesheet" type="text/css" href="./font-awesome-4.7.0/css/font-awesome.css">
    <!-- Google Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="./bootstrap-social-gh-pages/bootstrap-social.css">
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">      <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="row">
                <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="task.html">Tasks</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
                </div>
                </div>
            </div>
        </nav>     
    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row">
                <div>
                    <h1>Want to be the next Elon Musk, Bill Gates or Mark Zuckerburg?</h1>
                    <p style="padding:40px;"></p>
                    <button type="button" class="btn btn-primary btn-lg btn-block">Below are your tasks</button>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <ol class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li><a href="task.html">Task</a></li>
            <li><a href="about.html">About</a></li>
        </ol>
    </div>

    <div class="container">
        <div class="row">
            <div class="well well-lg">
                <p style="padding:20px;"></p>
                <h2 align=center>Want to be the next Elon?</h2>
            
                <h3>Pick your task</h3>
                <ul>
                    <li><a href="task.html">Task 1</a></li>
                    <li><a href="task.html">Task 2</a></li>
                    <li><a href="task.html">Task 3</a></li>
                </ul>
                <p><a href="https://en.wikipedia.org/wiki/Energy" target="_blank">More &raquo;</a></p>
            </div>
        </div>


        <div class="row">
            <div class="well well-lg">
                <p style="padding:20px;"></p>
                <h2 align=center>Want to be the next Bill?</h2>
            
            
                <h3>Pick your task</h3>
                <ul>
                    <li><a href="task.html">Task 1</a></li>
                    <li><a href="task.html">Task 2</a></li>
                    <li><a href="task.html">Task 3</a></li>
                </ul>
                <p><a href="#">More &raquo;</a></p>
            </div>
        </div>

        <div class="row">
            <div class="well well-lg">
                <p style="padding:20px;"></p>
                <h2 align=center>Want to be the next Mark?</h2>
            
            
                <h3>Pick your task</h3>
                <ul>
                    <li><a href="task.html">Task 1</a></li>
                    <li><a href="task.html">Task 2</a></li>
                    <li><a href="task.html">Task 3</a></li>
                </ul>
                <p><a href="#">More &raquo;</a></p>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">          
                <div>
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html">Home</a></li>&nbsp;
                        <li><a href="task.html">Task</a></li>&nbsp;
                        <li><a href="about.html">About</a></li>
                    </ul>
                </div>
                <div>
                    <h5>Our Address</h5>
                    <address>
		              121, Clear Water Bay Road<br>
		              Clear Water Bay, Kowloon<br>
		              HONG KONG<br>
		              <i class="fa fa-phone"></i>: +852 1234 5678<br>
                  <i class="fa fa-fax"></i>: +852 8765 4321<br>
                  <i class="fa fa-envelope"></i>: 
                                 <a href="mailto:plantsfortrees@gmail.com">plantsfortrees@gmail.com</a>
		           </address>
                </div>
                <hr>
                <div>
                    <div class="nav navbar-nav" style="padding: 40px 10px;">
                       <!--Facebook-->
                        <a href="http://www.facebook.com" target="_blank"><button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button></a>&nbsp;
                        <!--Twitter-->
                        <a href="http://www.twitter.com" target="_blank"><button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i></button></a>&nbsp;
                        <!--Google +-->
                        <a href="http://www.googleplus.com" target="_blank"><button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i></button></a>&nbsp;
                        <!--Linkedin-->
                        <a href="http://www.linkedin.com" target="_blank"><button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i></button></a>
                    </div>
                </div>
                <div>
                    <p style="padding:10px;"></p>
                    <p align=center>© Copyright 2016 The Task Website </p>
                </div>
            </div>
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

最佳答案

我在这里添加了带有默认 Bootstrap 字形的箭头:http://getbootstrap.com/components/

并使用 <a href="#about">将链接到带有 id="about" 的页面部分

将此 id 提供给关于部分(我猜是地址的位？)<div id="about">

body {
  padding: 0px;
  z-index: 0;
}
.nav li a {
   text-align:center;
}
.navbar-inverse {
  background-color: #F8F8F8;
  border-color: #E7E7E7;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background: #1A237E;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background: #1A237E;
}
footer {
  height: 400px;
  background: #eee;
}
.list-unstyled {
  display: inline-flex;
}
h5 {
  text-transform: uppercase;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0px;
  padding: 10px 16px;
  text-transform: uppercase;
}

<!DOCTYPE html>
<html lang="en">

<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>Task List</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <link rel="stylesheet" type="text/css" href="./font-awesome-4.7.0/css/font-awesome.css">
  <!-- Google Fonts-->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

  <link rel="stylesheet" type="text/css" href="./bootstrap-social-gh-pages/bootstrap-social.css">
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="row">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a>
            </li>
            <li><a href="task.html">Tasks</a>
            </li>
            <li><a href="#about" data-toggle="collapse" data-target="#navbar"><span class="glyphicon glyphicon-chevron-down pull-left" aria-hidden="true"></span>About<span class="glyphicon glyphicon-chevron-down pull-right" aria-hidden="true"></span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <header class="jumbotron">
    <!-- Main component for a primary marketing message or call to action -->

    <div class="container">
      <div class="row">
        <div>
          <h1>Want to be the next Elon Musk, Bill Gates or Mark Zuckerburg?</h1>
          <p style="padding:40px;"></p>
          <button type="button" class="btn btn-primary btn-lg btn-block">Below are your tasks</button>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <ol class="breadcrumb">
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="task.html">Task</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
    </ol>
  </div>

  <div class="container">
    <div class="row">
      <div class="well well-lg">
        <p style="padding:20px;"></p>
        <h2 align=center>Want to be the next Elon?</h2>

        <h3>Pick your task</h3>
        <ul>
          <li><a href="task.html">Task 1</a>
          </li>
          <li><a href="task.html">Task 2</a>
          </li>
          <li><a href="task.html">Task 3</a>
          </li>
        </ul>
        <p><a href="https://en.wikipedia.org/wiki/Energy" target="_blank">More &raquo;</a>
        </p>
      </div>
    </div>


    <div class="row">
      <div class="well well-lg">
        <p style="padding:20px;"></p>
        <h2 align=center>Want to be the next Bill?</h2>


        <h3>Pick your task</h3>
        <ul>
          <li><a href="task.html">Task 1</a>
          </li>
          <li><a href="task.html">Task 2</a>
          </li>
          <li><a href="task.html">Task 3</a>
          </li>
        </ul>
        <p><a href="#">More &raquo;</a>
        </p>
      </div>
    </div>

    <div class="row">
      <div class="well well-lg">
        <p style="padding:20px;"></p>
        <h2 align=center>Want to be the next Mark?</h2>


        <h3>Pick your task</h3>
        <ul>
          <li><a href="task.html">Task 1</a>
          </li>
          <li><a href="task.html">Task 2</a>
          </li>
          <li><a href="task.html">Task 3</a>
          </li>
        </ul>
        <p><a href="#">More &raquo;</a>
        </p>
      </div>
    </div>
  </div>

  <footer>
    <div class="container">
      <div id="about">
        <h5>Links</h5>
        <ul class="list-unstyled">
          <li><a href="index.html">Home</a>
          </li>&nbsp;

          <li><a href="task.html">Task</a>
          </li>&nbsp;
          <li><a href="about.html">About</a>
          </li>
        </ul>
      </div>
      <div>
        <h5>Our Address</h5>
        <address>
		              121, Clear Water Bay Road<br>
		              Clear Water Bay, Kowloon<br>
		              HONG KONG<br>
		              <i class="fa fa-phone"></i>: +852 1234 5678<br>
                  <i class="fa fa-fax"></i>: +852 8765 4321<br>
                  <i class="fa fa-envelope"></i>: 
                                 <a href="mailto:plantsfortrees@gmail.com">plantsfortrees@gmail.com</a>
		           </address>
      </div>
      <hr>
      <div>
        <div class="nav navbar-nav" style="padding: 40px 10px;">
          <!--Facebook-->
          <a href="http://www.facebook.com" target="_blank">
            <button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i>
            </button>
          </a>&nbsp;
          <!--Twitter-->
          <a href="http://www.twitter.com" target="_blank">
            <button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i>
            </button>
          </a>&nbsp;
          <!--Google +-->
          <a href="http://www.googleplus.com" target="_blank">
            <button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i>
            </button>
          </a>&nbsp;
          <!--Linkedin-->
          <a href="http://www.linkedin.com" target="_blank">
            <button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i>
            </button>
          </a>
        </div>
      </div>
      <div>
        <p style="padding:10px;"></p>
        <p align=center>© Copyright 2016 The Task Website</p>
      </div>
    </div>
  </footer>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

关于html - 向 Bootstrap block 级按钮添加功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41163125/

文章推荐： javascript - 为什么我的交通灯代码不起作用？

文章推荐：循环内的 JavaScript 闭包 – 简单的实际示例

文章推荐： javascript - 使用 css 内容循环 javascript

按钮
所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式..
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
c# - 隐藏可扩展属性的省略号 (...) 按钮，例如属性网格中字体属性的 "…"按钮
我在自定义控件中添加了一个新属性作为可扩展属性，例如属性网格中的字体属性。在 Windows 窗体应用程序项目中使用我的自定义控件后，我在属性网格中看到一个省略号 (…) 按钮，如字体属性的“…”按钮
javascript - “给我发推文”按钮 - JavaScript 按钮
我尝试将 Twitter 上的“Tweet Me”按钮 ( http://twitter.com/goodies/tweetbutton ) 添加到我的网站。然而，每当按下按钮时，我都会收到此 Jav
javascript - html - <输入类型=按钮> 和 <按钮>
我试图在我的文本区域中获取一个按钮值，如果我使用则工作正常但如果我使用那么它就不起作用了。你能找出问题所在吗？ HTML 1 2 3 4 JavaScript $(document).read
c# - 如何根据调用方法的调用(按钮)发送者(按钮#)操作变量名称？
我的 C# Winform 面板中有一堆文本框。每行文本框的命名如下: tb1 tbNickName1 comboBox1 tb2 tbNickName2 comboBox2 tb3 tbNickNa
javascript - 隐藏 'Clear' 按钮，直到单击 'Apply' 按钮
我有一个表单，其中过滤器下方有按钮(应用过滤器和清除过滤器)，我试图在单击“应用”按钮时显示“清除”，并在单击“清除”按钮时隐藏“清除”按钮。下面的代码(如果我的表有的话):
javascript - 我有一个 Excel 按钮，我想在数据表中添加 pdf 按钮
excel 按钮正在工作，但是当我添加 pdf 按钮时，它添加仅显示 pdf 按钮 excel 按钮在 pdf 按钮添加后隐藏 $(document).ready(function() { $
html - 将标题分为移动应用程序的 3 列(按钮、标题、按钮)
我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题:Button1(左位) Title(居中) Button2(右位) 这是我为这个 div 编写的代码:
javascript - 即使有一个框未选中，如何禁用“允许”按钮？仅当选中所有复选框时才应启用“允许”按钮？
仅当选中所有框时才应禁用“允许”按钮。我该怎么做？我已经完成了 HTML 部分，如下所示。如何执行其中的逻辑部分？即使未选中一个复选框，也应禁用“允许”按钮
php - 在我的网站中开发“点赞”按钮，而不是添加 Facebook“点赞”按钮
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
java - 在 JSF2 中呈现 HTML5 按钮(按钮、重置和提交)
如您所知，您可以使用 2 种方法在 HTML5 中呈现按钮: 使用 void 元素或如果您需要内容，请使用元素(不是空元素)。在JSF2中，有2种方式生成按钮；与UICommand或 UIOu
jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
android - 如何使用 ActionDone 按钮(不带 Enter 按钮)实现多行 EditText
我有用于在消息(电子邮件、短信)上输入内容的 EditText。我希望在单击 ActionDone 按钮时立即发布消息。我为此使用以下代码: message.setOnEditorActionList
android - 如何禁用 EditText 软件键盘上的 "Next"按钮(替换为 "Done"按钮)
我的 Android 应用程序中有一堆 EditText，每个都将 InputMethod 设置为 numberSigned。我的目标设备没有硬件键盘，而是使用软件键盘输入数字。 Android 将输
java - 无法以编程方式隐藏弧形菜单中的 fab 按钮。尝试了 upload.hide();无法弄清楚如何隐藏 fab 按钮
我无法以编程方式隐藏弧形菜单中的 fab 按钮。我正在使用https://github.com/saurabharora90/MaterialArcMenu在我的代码中。如何在Java中以编程方式隐藏
java - 有没有办法在 JOptionPane showInputDialog 中只有 OK 按钮(没有 CANCEL 按钮)？
我已经看到这在其他类型的对话框窗口中是可能的，例如“showConfirmDialog”，其中可以指定按钮的数量及其名称；但是使用“showInputDialog”时是否可以实现相同的功能？我似乎无法
java - 如何通过 Selenium 和 Java 单击“停用”按钮，然后单击“激活”按钮
相同的按钮用于激活和停用。第一次，当代码运行按钮单击并成功“停用”时。但第二次，代码无法找到该元素。第一个案例按钮位于第二个“a”标签中，然后停用第一个“a”标签中的按钮。案例1: Edit
JavaScript 按钮
是否可以将按钮的 onclick 操作设置为 JavaScript 变量？这个想法是我们用 JavaScript 控制一个表。每当点击该表的一行时，我们就会更新一个 JavaScript 变量。该 v
android自定义控件(按钮)
我想创建一个按钮，它包含左侧的文本和右侧的复选框(或任何其他组件)。我怎样才能做到这一点？我发现我可以制作自己的 View extends Button，但是如果可以的话我应该如何实现 onDraw

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 向 Bootstrap block 级按钮添加功能