不安装bootstrap的话,可以用链接,效果是一样的,使用的时候记住标签即可,记不住可以多熟悉一下,链接放在head即可
<meta name="viewport" content="width=device-width, initial-scale=1">
基本表格:
<table class="table"> ... </table>
条纹表格:
<table class="table table-striped"> ... </table>
边框表格
<table class="table table-bordered"> ... </table>
鼠标悬停
<table class="table table-hover"> ... </table>
颜色表格或者状态表格
不同的版本可能颜色不同,或者不显示颜色,影响不大,自己调试
<!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>
紧缩表格
其实也不算缩进太多,还是非常美观的
<table class="table table-condensed"> ... </table>
表单
同样记住标签即可,不要将表单组直接和输入框组混合使用,可以嵌套
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>