每日一点前端-5-bootstrap小练习 电玩女神 2021-06-24 16:11 456阅读 0赞 今天尝试了下bootstrap组件的使用，感觉跟之前使用的semantic UI差不多，还有好多没有尝试，在界面上我感觉都大同小异，也不知道是不是还有不多不同的地方我还没有探索到。不过听说以后我们要用esay UI，有空的时候再试试那个上面的例子。 ![2789632-05040f3df5412560.png][] bootstrap小练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动条</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <style> /*<!--::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的-->*/ /*::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的*/ /*::-webkit-scrollbar-track 外层轨道*/ /*::-webkit-scrollbar-track-piece 内层滚动槽*/ /*::-webkit-scrollbar-thumb 滚动的滑块*/ /*::-webkit-scrollbar-corner 边角*/ /*::-webkit-resizer 定义右下角拖动块的样式*/ ::-webkit-scrollbar{width:10px;background-color: red;} ::-webkit-scrollbar{background-color:pink;border-radius: 10px;width: 8px;height: 8px;} ::-webkit-scrollbar-track{background-color: #2a6496;} ::-webkit-scrollbar-track-piece{background-color: red;} ::-webkit-scrollbar-thumb{background-color: black;} ::-webkit-scrollbar-corner{color: blue;} </style> </head> <body> <h5>bootstrap里的滚动条的使用</h5> <pre class="pre-scrollable"> <ol> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> <li>出现滚动条吧</li> </ol> </pre> <div class="text-center">好像还不错的样子！</div> <h3>表格</h3> <h5>基础表格</h5> <table class="table"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> <h5>斑马线表格</h5> <table class="table table-striped"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> <h5>带边框的表格</h5> <table class="table table-striped table-bordered"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> <h5>鼠标悬浮高亮表格</h5> <table class="table table-striped table-bordered table-hover"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> <h5>紧凑型表格</h5> <table class="table table-striped table-bordered table-hover table-condensed"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> <h5>响应式表格</h5> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.333333333333333333333333333333333333333333</td> </tr> </table> </div> <h5>表格-行控制</h5> <table class="table table-striped table-bordered"> <th>表格标题1</th> <th>表格标题2</th> <th>表格标题3</th> <tr class="active"> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr class="success"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr class="info"> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> <tr class="waring"> <td>4.1</td> <td>4.2</td> <td>4.3</td> </tr> <tr class="danger"> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table> <h5>基础表单</h5> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱：</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱"/> </div> <div class="form-group"> <label for="examplePassword1">密码</label> <input type="password" class="form-control" id="examplePassword1" placeholder="请输入密码"/> </div> </form> <input type="checkbox">记住密码 <button type="submit" class="btn btn-default">登录邮箱</button> <h5>水平表单</h5> <form role="form" class="form-horizontal" > <div class="form-group"> <label for="exampleInputEmail2" class="col-sm-2 control-label">邮箱：</label> <div class="col-sm-10"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱"/> </div> </div> <div class="form-group"> <label for="examplePassword2" class="col-sm-2 control-label">密码：</label> <div class="col-sm-10"> <input type="password" class="form-control" id="examplePassword2" placeholder="请输入密码"/> </div> </div> </form> <h5>水平表单</h5> <form role="form" class="inline" > <div class="form-group"> <label for="exampleInputEmail3" class="col-sm-2 control-label">邮箱：</label> <div class="col-sm-10"> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="请输入邮箱"/> </div> </div> <div class="form-group"> <label for="examplePassword3" class="col-sm-2 control-label">密码：</label> <div class="col-sm-10"> <input type="password" class="form-control" id="examplePassword3" placeholder="请输入密码"/> </div> </div> </form> <h5>下拉列表</h5> <form> <div class="form-group"> <select class="form-control"> <option>语文</option> <option>数学</option> <option>英语</option> <option>物理</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <option>语文</option> <option>数学</option> <option>英语</option> <option>物理</option> </select> </div> </form> <button class="btn">btn</button> <button class="btn btn-primary">btn btn-primary</button> <button class="btn btn-default">btn btn-default</button> <button class="btn btn-block">btn btn-block</button> <button class="btn btn-danger">btn btn-danger</button> <button class="btn btn-link">btn btn-link</button> <button class="btn btn-info">btn btn-info</button> <button class="btn btn-success">btn btn-success</button> <br/><br/><br/><br/> </body> </html> ![2789632-3b18269684ea9294.png][] 公众号.png [2789632-05040f3df5412560.png]: /images/20210615/80fdfed8ac7a4ae392fa54ceb703308f.png [2789632-3b18269684ea9294.png]: /images/20210615/4a1f9aafe0ae421291919009ffd2135f.png
还没有评论，来说两句吧...