Bootstrap需要引的三个文件
<link rel="stylesheet" href="css/bootstrap.css"> 表格元素的样式
<script type="text/jscript" src="js/bootstrap.js"></script> bootstrap动画
<script type="text/jscript" src="js/jquery-3.4.0.min.js"></script> javascript库
bootstrap最大的系统就是响应系统(栅格系统 )
<meta name="viewport" content="width=device-width, initial-scale=1"> 绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> //触屏缩放 引个头 <title></title> <link rel="stylesheet" href="css/bootstrap.css"> <script type="text/jscript" src="js/bootstrap.js"></script> <script type="text/jscript" src="js/jquery-3.4.0.min.js"></script> <style> #d1{ height: 200px; 200px; background: red; } </style> <script type="text/jscript"> /* jqDom.click(function(){ $(this) }); */ // js的页面加载完成 /* window.onload=function(){ $("#d1").mouseover(function(){ // js转jq 鼠标移入变绿色 $(this).css("background","green"); }); // 鼠标移出变蓝色 $("#d1").mouseout(function(){ $(this).css("background","blue"); }) } */ // jQuery的加载页面完成 $(function(){ $("#d1").mouseover(function(){ // js转jq 鼠标移入变绿色 $(this).css("background","green"); }); // 鼠标移出变蓝色 $("#d1").mouseout(function(){ /* jqDmo.css({ 'color' : 'red', 'width' : '100px' }); */ $(this).css({ // jQuery多样式 "background":"blue", "width":"500px"}); }) }) // ---------------------JS操作属性----------------- /* jsDom.getAttribute('class'); //获取属性值 jsDom.setAttribute('class','add');//设置属性值 jsDom.removeAttribute('class');//把属性移除 // -----------------JQ操作属性----------------- jqDom.attr('class'); jqDom.attr('class','add'); jqDom.attr({ 'data' : 'add', 'id' : 'add', }); jQDom.removeAttr('class') jqDom.addclass('del') */ $(function(){ //用jQuery获取table 设置样式 $("table").attr({ "border":"1px","width":"200px","height":"200px" }) }) </script> </head> <body> <div id="d1"></div> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <!-- table下的父子选择器 --> <table class="table table-hover"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）Link</button> <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> </body> </html>