(文章已過時)button

Posted on Edited on In Views: Disqus:

 

1.Button

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Case</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>My first Bootstrap website!</h1>      
        <p>This page will grow as we add more and more components from Bootstrap...</p>      
        <a href="#" class="btn btn-danger btn-lg">Search</a>
      </div>
    </div>

    <div class="container">
      <p>This is a paragraph.</p>      
      <p>This is another paragraph.</p>      
      <p>This is a paragraph.</p>      
      <p>This is another paragraph.</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

".btn-danger"為按鈕樣式與顏色".btn-lg"為按鈕大小

按鈕的樣式有 .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, and .btn-link

按鈕的大小有 .btn-lg (large button), .btn-sm (small button), and .btn-xs (extra small button).

btn-group也可以用來調整button大小

 

2.另一例子

Bootstrap Case

 

3.Dropup variation

Bootstrap Case

 

參考網址：

Bootstrap CSS Buttons Reference