bootstrap笔记

来源：互联网发布：俄罗斯兴奋剂知乎编辑：程序博客网时间：2024/05/29 15:13

样式排版

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>bootstrap</title><link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css"></head><body style="margin:80px;">    <!-- 标题样式 -->    <!-- <h1>hello <small>world</small></h1>    <h2>hello world</h2>    <h3>hello world</h3>    <h4>hello world</h4>    <h5>hello world</h5> -->    <!-- 标记 -->    <!-- <p class="h1">nihao</p>    <p><del>ni</del>  <mark>hao</mark> </p> -->    <!-- 对齐 -->    <!-- <p class="text-left">hello world</p>    <p class="text-right">hello world</p>    <p class="text-center">hello world</p>    <p class="text-nowrap" style="width: 30px;border: 1px solid red;">hello world</p>    <p>hello world</p> -->    <!-- 引用文本 -->    <!-- <blockquote>        引用文本    </blockquote>    <blockquote class="pull-right">引用文本</blockquote> -->    <!-- 列表 -->    <!-- <ul class="list-unstyled list-inline" style="margin: 50px;">        <li>hello world</li>        <li>hello world</li>        <li>hello world</li>        <li>hello world</li>        <li>hello world</li>    </ul> -->    <!-- 水平 -->    <!-- <dl class="dl-horizontal">        <dt>介绍</dt>        <dd>fhwohefoanfonawoefnonsaohfaho</dd>    </dl> -->    <!-- 代码 -->    <!-- <code>echo "hellw world"</code>    press <kbd>ctrl+,</kbd>    <pre>        &lt ?php        echo 'helle world';        ?&gt    </pre> -->    </body></html>

表格与按钮

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表格与按钮</title>    <link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css"></head><body style="margin:80px;"><!-- <table class="table table-hover">    <thead>        <tr>            <th>编号</th>            <th>姓名</th>            <th>性别</th>            <th>年龄</th>        </tr>    </thead>    <tbody>        <tr class="success">            <td>1</td>            <td>小明</td>            <td>男</td>            <td>15</td>        </tr>        <tr class="warning">            <td>2</td>            <td>小花</td>            <td>女</td>            <td>32</td>        </tr>        <tr class="danger">            <td>3</td>            <td>小李</td>            <td>男</td>            <td>24</td>        </tr>    </tbody></table> --> <!-- 按钮 --> <!-- <a href="http://www.baidu.com" class="btn btn-default " >a</a> <input type="submit" class="btn btn-default disabled" value="input"> <button class="btn btn-default btn-block">button</button> --><script src="http://localhost/Public/Js/jquery.js"></script><script src="http://localhost/Public/bootstrap/dist/js/bootstrap.min.js"></script></body></html>

表单与图片

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单与图片</title>    <link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></head><body style="margin:80px;"><form action="#" >    <div class="form-group has-success has-feedback" >        <label for="usernmae " class="control-label">用户名:</label>        <input type="text" id="usernmae" name="usernmae" placeholder='请输入您的用户名' class="form-control">        <span class="glyphicon glyphicon-ok form-control-feedback"></span>    </div>    <div class="form-group ">        <label for="password">密&nbsp&nbsp&nbsp&nbsp码:</label>        <input type="password" id="password" name="password" placeholder='请输入您的密码' class="form-control">    </div>    <div class="input-group">        <div class="input-group-addon">$</div>        <input type="text" class="form-control" name="money">        <div class="input-group-addon">.00</div>    </div></form><!-- 标签与输入框通行 --><!-- <form action="#" class="form-horizontal" >    <div class="form-group">        <label for="usernmae" class="col-sm-2 control-label">用户名:</label>        <div class="col-sm-10">            <input type="text" id="usernmae" name="usernmae" placeholder='请输入您的用户名' class="form-control">        </div>    </div>    <div class="form-group ">        <label for="password" class="col-sm-2 control-label">密&nbsp&nbsp&nbsp&nbsp码:</label>        <div class="col-sm-10">            <input type="password" id="password" name="password" placeholder='请输入您的密码' class="form-control">        </div>    </div>    <div class="input-group">        <div class="input-group-addon">$</div>        <input type="text" class="form-control" name="money">        <div class="input-group-addon">.00</div>    </div></form> --><!-- 复选框 --><!-- <form action="">    <div class="checkbox">        <label for="ty">            <input type="checkbox" name="hby" id="ty">体育        </label>    </div>    <div class="checkbox disabled">        <label class="disabled">            <input type="checkbox" name="hby" id="ls" class="disabled">历史        </label>    </div>    <label for="ty" class="checkbox-inline">        <input type="checkbox" name="hby" id="ty">体育    </label>    <label class="checkbox-inline disabled">        <input type="checkbox" name="hby" id="ls" class="disabled">历史    </label></form> --><!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-thumbnail"> --><!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-circle"> --><!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-rounded"> --><script src="http://localhost/Public/Js/jquery.js"></script><script src="http://localhost/Public/bootstrap/dist/js/bootstrap.min.js"></script></body></html>

0 0