bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门
<!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入bootstrap的css样式库 --> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 引入第三方库 --> <link rel="stylesheet" type="text/css" href="animate.css"> </head> <body> <!-- 按钮控件 --> <!-- <button class="btn btn-success">提交</button> <button class="btn btn-info">提交</button> <button class="btn btn-warning">提交</button> <button class="btn btn-danger">提交</button> <button class="btn btn-default">提交</button> <button class="btn btn-primary">提交</button> <div class='bg-primary'>bootstrap_css_js</div> <div class='glyphicon glyphicon-music' style="color:red"></div> --> <!-- 分页组件 --> <!-- <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> --> <!-- 栅格系统 用来布局 --> <div class="container"> <div class="row"> <div class="col-md-8"><p style="background: gray">.col-md-8</p></div> <div class="col-md-4"><p style="background: gray">.col-md-4</p></div> </div> <div class="row"> <div class="col-md-4"><p style="background: gray">.col-md-4</p></div> <div class="col-md-8"><p style="background: gray">.col-md-8</p></div> </div> <div class="row"> <div class="col-md-4"><p style="background: pink">pink1</p></div> <div class="col-md-4"><p style="background: pink">pink2</p></div> <div class="col-md-4"><p style="background: pink">pink3</p></div> </div> <!-- 表格控件 --> <table class="table table-striped table-bordered"> <thead> <tr> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td>username</td> <td>password</td> </tr> <tr class='success'> <td>username</td> <td>password</td> </tr> <tr class='info'> <td>username</td> <td>password</td> </tr> <tr class='warning'> <td>username</td> <td>password</td> </tr> </tbody> </table> <!-- 字体颜色 --> <p class="text-muted">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <p class="text-primary">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <p class="text-success">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <p class="text-info">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <p class="text-warning">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <p class="text-danger">字体颜色字体颜色字体颜色字体颜色字体颜色字体颜色</p> <!-- 按钮样式，a标签同样适用 --> <!-- <button class="btn btn-success">success</button> --> <a href="http://www.baidu.com" target="_blank" class="btn btn-success">success</a> <!-- 背景色 --> <p class="bg-primary">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-success">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-info">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-warning">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-danger">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <!-- 图片懒加载，首屏不全部显示，往下拖动才显示图片，项目地址： https://github.com/darkwing/LazyLoad --> <!-- <img data-src="https://www.baidu.com/img/bd_logo1.png" src="https://www.baidu.com/img/bd_logo1.png" /> --> <p class="glyphicon glyphicon-apple" style="color: green"></p> <!-- 图标组件，专业的网站 https://fontawesome.com/ --> <!-- 进度条--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> <h2>第三方css动画效果库Animate.css</h2> <button class="btn btn-success animated flash">button</button> </div> </body> </html>
bootstrap结合javascript展示标签页和弹出框的示例：
<!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script> <script src="static/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css"> </head> <body> <div class="container"> <div id="jinfo" class="alert alert-success">jquery</div> <div id="btn1" class="btn btn-info">按钮</div> <!-- 标签页 --> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">company home page</div> <div role="tabpanel" class="tab-pane" id="profile">profile page</div> <div role="tabpanel" class="tab-pane" id="messages">3</div> <div role="tabpanel" class="tab-pane" id="settings">4</div> </div> </div> <!-- 弹出框model --> <!-- Button trigger modal --> <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#chinasoft"> Launch demo modal </button> --> <!-- Modal --> <div class="modal fade" id="chinasoft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> 弹出框model文字内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <button class="btn btn-success" id="showmodal">弹出modal</button> </div> <script type="text/javascript"> $('#btn1').on('click', function(){ $('#jinfo').hide(1000).show(1000); }) //展示modal弹出框 $('#showmodal').on('click', function(){ $('#chinasoft').modal('show'); }) </script> </body> </html>
