向Bootstrap块级按钮添加功能

时间：2016-12-15 11:32:01

标签： html5 css3 twitter-bootstrap-3

我希望网页在点击“阻止级别”按钮时向下滚动，如下面的代码段所示。 Button也应在两侧（大写标题的左侧和右侧）显示向下箭头符号

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>

2 个答案:

答案 0 :(得分：0)

您可以在按钮代码上使用以下内容：<a href="#top">Top</a>以及应使用标记ID <h2 id="top">Place You Want</h2>显示的部分。

编码就像你可以在同一个html页面上创建链接。

P.S。：关于箭头，我不知道该怎么做。遗憾。

修改

示例：

<body>
 <div>
  <a href="#placeIwant">This is my button.</a>
 </div>
 <div>
<h1 id="placeIwant">Thats the header I want to show when I click the button</h1>
 </div>
</body>

使用id，当您单击按钮时，它将转到它所在的位置。在示例中，该按钮将您引导至id="placeIwant"，在我们的示例中为标题。您可以在代码上使用相同的逻辑。希望有所帮助！

答案 1 :(得分：0)

这里我添加了带有默认bootstrap glyphicons的箭头：http://getbootstrap.com/components/

并使用<a href="#about">将使用id="about"

链接到您网页的部分

将此ID提供给about部分（我猜这个地址的位数？）<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>

相关问题
最新问题