boostrap按鈕

時間  2019-12-05
標籤 boostrap 按鈕 欄目 C&C++ 简体版
原文   原文鏈接
  1. bootstrap按鈕
    • 對應連接：http://v3.bootcss.com/css/#buttons
    • 使用時添加基礎類class:btn
    • 默認樣式class=btn-default，控制大小class=btn-(lg | sm | xs)，沒有btn-md，默認即爲中等大小
    • 一些簡單的demo以及demo效果以下所示
    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .glyphicon-heart {font-size: 100px; color: red;}
        </style>
    </head>
<body>

<div class="container">
    <input type="button" value="按鈕" class="btn" />
    <input type="button" value="按鈕" class="btn btn-default" />
    <input type="button" value="按鈕" class="btn btn-link" />

    <br>
    <input type="button" value="按鈕" class="btn btn-primary" />
    <input type="button" value="按鈕" class="btn btn-primary btn-lg" />
    <input type="button" value="按鈕" class="btn btn-primary btn-sm" />
    <input type="button" value="按鈕" class="btn btn-primary btn-xs" />

    <br><br>
    <input type="button" value="按鈕" class="btn btn-primary" />
    <input type="button" value="按鈕" class="btn btn-primary active" />
    <input type="button" value="按鈕" class="btn btn-primary disabled" />

    <br><br>
    <a href="#" value="按鈕" class="btn btn-primary">按鈕</a>
    <button class="btn btn-primary">按鈕</button>
    <br><br>
    <button class="btn btn-primary btn-block">按鈕</button>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>
      View Code

  2. 按鈕組
    • class=btn-group
    • 若但願按鈕組的寬度和容器寬度同樣，則可設置class=btn-group-justified，須要注意的是在按鈕組中只有a標籤的能夠和容器寬度同樣，button和input標籤均不能和容器同寬度
    • 若但願按鈕組垂直排列，則可設置class=btn-group-vertical
    • btn-group通常不與btn-group-vertical同時使用
    • 表示箭頭上下的能夠設置class=dropdown dropup
    • 控制按鈕組的大小class=btn-group-(lg | sm | xs)，以上的demo及demo效果以下所示
    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>無標題文檔</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            .glyphicon-heart {font-size: 100px; color: red;}
        </style>
    </head>
<body>

<div class="container">
    <div class="btn-group">
        <button class="btn btn-primary">按鈕1</button>
        <button class="btn btn-primary">按鈕2</button>
        <button class="btn btn-primary">按鈕3</button>
    </div>
    <br><br>
    <div class="btn-group btn-group-justified">
        <button href="#" class="btn btn-primary">按鈕1</button>
        <button href="#" class="btn btn-primary">按鈕2</button>
        <button href="#" class="btn btn-primary">按鈕3</button>
    </div>
    <br><br>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">按鈕1</a>
        <a href="#" class="btn btn-primary">按鈕2</a>
        <a href="#" class="btn btn-primary">按鈕3</a>
    </div>
    <br>
    <div class="btn-group-vertical">
        <button class="btn btn-primary">按鈕1</button>
        <button class="btn btn-primary">按鈕2</button>
        <button class="btn btn-primary">按鈕3</button>
    </div>
    <div class="btn-group-vertical btn-group-lg">
        <button class="btn btn-primary">按鈕1</button>
        <button class="btn btn-primary">按鈕2</button>
        <button class="btn btn-primary">按鈕3</button>
    </div>
    <div class="btn-group-vertical btn-group-sm">
        <button class="btn btn-primary">按鈕1</button>
        <button class="btn btn-primary">按鈕2</button>
        <button class="btn btn-primary">按鈕3</button>
    </div>
    <div class="btn-group-vertical btn-group-xs">
        <button class="btn btn-primary">按鈕1</button>
        <button class="btn btn-primary">按鈕2</button>
        <button class="btn btn-primary">按鈕3</button>
    </div>
    <br><br>
    <a href="#" class="btn btn-primary">按鈕<span class="caret"></span></a>
    <br><br>
    <a href="#" class="btn btn-primary dropup">按鈕<span class="caret"></span></a>
    <br><br>
    <div class="btn-group dropup">
        <button class="btn btn-primary">按鈕</button>
        <button class="btn btn-primary"><span class="caret"></span></button>
    </div>
</div>

</body>
    <script src="js/jquery-2.1.3.js"></script>
    <script src="js/bootstrap.js"></script>
</html>
      View Code

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程