• 目录

按钮Button

阅读量: 665 编辑

按钮Button

一、按钮Button介绍

  • .btn

  • 颜色：.btn-default、.btn-primary、.btn-success、.btn-warning、.btn-danger

  • 大小：.btn-lg、.btn-sm、.btn-xs、.btn-block

  • 其他：.active、.disabled

二、代码实战

代码的详细解读，可以参考视频教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>

</head>
<body style="padding: 50px;">

    <h1>Form表单中的按钮</h1>
    <form role="form" class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-md-2">名字</label>
            <div class="col-md-8">
                <input type="text" class="form-control" placeholder="请输入名字">
            </div>
        </div>
    
        <div class="form-group">
            <label class="control-label col-md-2">颜色分按钮</label>
            <div class="col-md-8">
                <button class="btn btn-primary">按钮</button>
                <button class="btn btn-success">按钮</button>
                <button class="btn btn-danger">按钮</button>
                <button class="btn btn-warning">按钮</button>
            </div>
        </div>
    
        <div class="form-group">
            <label class="control-label col-md-2">大小分按钮</label>
            <div class="col-md-8">
                <button class="btn btn-primary btn-lg">按钮</button>
                <button class="btn btn-success btn-sm">按钮</button>
                <button class="btn btn-danger btn-xs">按钮</button>
                <button class="btn btn-warning btn-block">按钮</button>
            </div>
        </div>
    
        <div class="form-group">
            <label class="control-label col-md-2">是否可用</label>
            <div class="col-md-8">
                <button class="btn btn-primary btn-lg disabled" >按钮</button>
                <button class="btn btn-success btn-sm active" >按钮</button>
            </div>
        </div>
    
    </form>

</body>
</html>
  • 目录