【08】Bootstrap — 按钮

来源：互联网发布：java excel导入导出编辑：程序博客网时间：2024/05/28 19:24

可作为按钮使用的标签或元素

<!DOCTYPE html><html lang="zh-CN">    <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>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <a class="btn btn-default" href="#" role="button">Link</a>        <button class="btn btn-default" type="submit">Button</button>        <input class="btn btn-default" type="button" value="Input">        <input class="btn btn-default" type="submit" value="Submit">    </body></html>

作为按钮使用的标签或元素

预定义样式

<!DOCTYPE html><html lang="zh-CN">    <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>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <!-- Standard button -->        <button type="button" class="btn btn-default">Default</button>        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->        <button type="button" class="btn btn-primary">Primary</button>        <!-- Indicates a successful or positive action -->        <button type="button" class="btn btn-success">Success</button>        <!-- Contextual button for informational alert messages -->        <button type="button" class="btn btn-info">Info</button>        <!-- Indicates caution should be taken with this action -->        <button type="button" class="btn btn-warning">Warning</button>        <!-- Indicates a dangerous or potentially negative action -->        <button type="button" class="btn btn-danger">Danger</button>        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->        <button type="button" class="btn btn-link">Link</button>    </body></html>

bootstrap预定义样式按钮

尺寸

<!DOCTYPE html><html lang="zh-CN">    <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>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <p>            <button type="button" class="btn btn-primary btn-lg">Large button</button>            <button type="button" class="btn btn-default btn-lg">Large button</button>        </p>        <p>            <button type="button" class="btn btn-primary">Default button</button>            <button type="button" class="btn btn-default">Default button</button>        </p>        <p>            <button type="button" class="btn btn-primary btn-sm">Small button</button>            <button type="button" class="btn btn-default btn-sm">Small button</button>        </p>        <p>            <button type="button" class="btn btn-primary btn-xs">Extra small button</button>            <button type="button" class="btn btn-default btn-xs">Extra small button</button>        </p>        <hr/>        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>        <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>    </body></html>

bootstrap控制按钮尺寸

激活状态

<!DOCTYPE html><html lang="zh-CN">    <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>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <button type="button" class="btn btn-primary btn-lg active">Primary button</button>        <button type="button" class="btn btn-default btn-lg active">Button</button>    </body></html>

bootstrap按钮激活状态

禁用状态

<!DOCTYPE html><html lang="zh-CN">    <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>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>    </head>    <body style="padding: 20px;">        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>        <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>        <hr/>        <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>        <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>    </body></html>

bootstrap按钮禁用状态

阅读全文

0 0