bootstrap-预定义样式及简单登录框

来源：互联网发布：2016淘宝卖家电脑配置编辑：程序博客网时间：2024/06/14 17:37
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>预定义样式风格</title>    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">    <script src="../JS/jquery-3.2.1.min.js"></script>    <script src="../JS/bootstrap.js"></script>    <style type="text/css">        #login{width: 400px;}    </style></head><body style="height: 2000px"><div class="container">    <br>    <input type="button" value="自定义" class="btn">    <input type="button" value="首选项" class="btn btn-primary">    <input type="button" value="成功" class="btn btn-success">    <input type="button" value="一般信息" class="btn btn-info">    <input type="button" value="警告" class="btn btn-warning">    <input type="button" value="危险" class="btn btn-danger">    <input type="button" value="默认" class="btn btn-default">    <input type="button" value="链接" class="btn btn-link">    <br><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>    <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>    <br><br>    <p>默认段落</p>    <p class="bg-primary">首选项</p>    <p class="bg-success">成功</p>    <p class="bg-info">一般信息</p>    <p class="bg-warning">警告</p>    <p class="bg-danger">危险</p>    <br><br>    <span>默认文字</span><br>    <span class="text-paimary bg-primary">首选项</span><br>    <span class="text-success bg-success">成功</span><br>    <span class="text-info bg-info">一般信息</span><br>    <span class="text-warning bg-warning">警告</span><br>    <span class="text-danger bg-danger">危险</span><br>    <br><br>    <div class="alert alert-primary">我是警告框</div>    <div class="alert alert-warning">我是警告框</div>    <div class="alert alert-info">我是警告框</div>    <div class="alert alert-success">我是警告框</div>    <div class="alert alert-danger">我是警告框</div>    <br><br>    <div class="panel panel-primary">        <div class="panel-heading">            <h4>我是面板的标题</h4>        </div>        <div class="panel-body">            <h4>我是面板的主体内容</h4>        </div>    </div>    <br><br><br><br>    <div id="login" class="panel panel-primary">        <div class="panel-heading">Login</div>        <div class="panel-body">            <div class="form-group">                <label>用户名：</label><input type="text" class="form-control input-sm">                <div class="alert alert-warning">用户名不能为空</div>                <label>密码：</label><input type="password" class="form-control">                <a href="#" class="text-info">忘记密码</a>            </div>            <input type="button" value="登录" class="btn btn-primary pull-right">        </div>    </div></div>  </body></html>    <!--     预定义风格的样式： 首选项 成功 一般信息 警告 危险     1.按钮样式：     btn(自定义) primary  success  info  warning  danger default(默认) link(链接)    2.按钮大小：    如果没有定义就是默认大小 还有三种：lg sm xs    3.按钮状态：    选中状态active  禁用状态:disabled      4.按钮种类：    常给 a input button 这三种标签加按钮样式    5.按钮默认是行内样式，可以通过设置btn-block使它变成块状，独占一行    6.按钮组，下节学习    <种类 class='btn btn-[primary  success  info  warning  danger] btn-[lg sm xs] [active disabled]'>    背景样式：    首选项 成功 一般信息 警告 危险    class='bg-[primary  success  info  warning  danger]'    文字样式：    首选项 成功 一般信息 警告 危险    class='text-[primary  success  info  warning  danger]'    警告样式：    首选项 成功 一般信息 警告 危险    class='alert alert-[primary  success  info  warning  danger]'    面板样式：    首选项 成功 一般信息 警告 危险    class='panel panel-[primary  success  info  warning  danger]'    class="panel-[heading body]"    表单样式：    class="form-control" 大小可以设置input-[lg sm xs]    <input type="text" class="form-control input-sm">    -->
阅读全文
0 0