为什么bootstrap按钮没有链接到另一个页面?

时间:2017-01-07 10:49:35

标签: html twitter-bootstrap button href

我制作了这段代码。我需要两个第一个按钮带我到其他页面,但它不起作用。我是 href 的用户。

<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>

    <button type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</button>
    <button type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</button>
    <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>

5 个答案:

答案 0 :(得分:1)

如果您想要链接,请使用a标记,而不是button

<a class="btn btn-link btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>

答案 1 :(得分:0)

尝试a代码而不是button代码

<div class="container">
  <div class="menu-principal">
    <h2>MENÚ PRINCIPAL</h2>    
    <a type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>
    <a type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</a>
    <a type="button" class="btn btn-danger btn-lg btn-block">SALIR</a>
  </div>

答案 2 :(得分:0)

<tr>
   <td colspan="5"><hr class="chkout_hr"></td>
</tr>

您必须使用<div class="container"> <div class="menu-principal"> <h2>MENÚ PRINCIPAL</h2> <a href="/enviarSMS.html"><button type="button" class="btn btn-primary btn-lg btn-block">Enviar SMS</button></a> <a href="/agregarNumero.html"><button type="button" class="btn btn-primary btn-lg btn-block">Agregar número de celular</button> </a> <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button> </div> 标记。您无法将href添加到<a>

答案 3 :(得分:0)

您需要更新以下代码:

使用 a 标记代替按钮。并且还检查了bootstrap Scripts(JS和CSS)所需的参考。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>

    <a href="/enviarSMS.html" class="btn btn-primary btn-lg btn-block">Enviar SMS</a><br>
    <a href="/agregarNumero.html" class="btn btn-primary btn-lg btn-block">Agregar número de celular</a><br>
    <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>    
</body>
</html>

并且还使用: -

<div id="browse_app">
  <a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>

答案 4 :(得分:-1)

这应该是

HTML

<div class="container">
    <div class="menu-principal">
      <h2>MENÚ PRINCIPAL</h2>
      <button type="button" class="btn btn-primary btn-lg btn-block">
           <a href="/enviarSMS.html"> Enviar SMS</a>
      </button>
      <button type="button" class="btn btn-primary btn-lg btn-block">
           <a href="/agregarNumero.html"> Agregar número de celular</a>   
      </button>
      <button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>