一、如何引入bootstrap到htmlcss
解决办法:bootstrap官方提供了连接服务,永久免费,即便你不下载bootstrap框架文件到本地,也能够直接在html中使用,使用下面这段代码html
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其余内容都*必须*跟随其后! --> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
***********************************华丽分割线***********************************jquery
2,编写一个表单bootstrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% extends "base.html" %} {% block body %} <button type="button" class="btn btn-primary btn-lg btn-block"> Page NotFound </button> <form> <div class="form-group"> <label>用户名:</label> <input type="text" class="form-control" id="username" placeholder="Username" style="width: auto"> <lable>密码:</lable> <input type="password" class="form-control" id="password" placeholder="Password" style="width:auto"> </div> <div> <input type="submit" class="btn btn-success" value="提交" id="sumbitBtn"> <input type="submit" class="btn btn-success" value="取消" id="exitBtn"> </div> </form> {% endblock %} </body> </html>
***********************************华丽分割线***********************************api
3.给表格设置背景色:class=wrining. class=success等等框架
<table class="table table-bordered"> <tr class=""> <td class="warning">覃光林001</td> <td class="success">覃光林002</td> <td class="default">覃光林003</td> </tr> <tr class="danger"> <td class="active">覃光林004</td> <td class="info">覃光林005</td> <td class="danger">覃光林006</td> </tr> </table>
***********************************华丽分割线***********************************ide
4.分列式下拉菜单学习
{# 分裂式下拉菜单#} <div class="btn-group"> <button type="button" class="btn btn-danger">覃光林,来测试学习</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
***********************************华丽分割线***********************************测试
5.警告框ui
<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
可关闭的警告框
<div class=alert alert-success alert-dismissible>...</div>
警告框中的连接
<div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div>
***********************************华丽分割线***********************************
6.文本右对齐
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
***********************************华丽分割线***********************************
7.改变大小写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
***********************************华丽分割线***********************************
8.表格
<table class="table"> ... </table>
带边框的表格
<table class="table table-bordered"></table>
Class | 描述 |
---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动做 |
.info |
标识普通的提示信息或动做 |
.warning |
标识警告或须要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动做 |
***********************************华丽分割线***********************************
9.多选框与单选框(单选框设置name一致便是单选,name不一样就是多选)
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 多选框1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2">多选框2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 多选框3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option1"> 单选框1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option2"> 单选框2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option3"> 单选框3 </label>
***********************************华丽分割线***********************************
10.设置表格边框(class="table table-bordered")
<table class="table table-bordered"> <thead> <tr class="text-center" > <td class="alert-success">我无论</td> <td class="alert-warning">我最帅</td> <td class="alert-info">大家都是小可爱</td> </tr> </thead> <thead> <tr class="text-center"> <td class="alert-warning">我无论</td> <td class="alert-danger">我最帅</td> <td class="text-success">大家都是小可爱</td> </tr> </thead> <thead> <tr class="text-center"> <td >我无论</td> <td >我最帅</td> <td >大家都是小可爱</td> </tr> </thead> </table>