day 48 Bootstrap
布局容器
使用前端框架之后 所有标签样式的调整 全部是通过class属性值来的
<div class="container"></div> 左右两边留白
<div class="container-fluid"></div> 全屏显示
栅格系统
默认情况下
一个row就是一行
每个row默认会均分成12份
你可以通过col-md-Num 来选择你想要占几份
你当前已经占了几份 还剩几份 (12份)
栅格参数 xs
sm
md
lg
起手写的两句代码 <div class="container-fluid"> <div class="row"> ... </div> </div> 列偏移 col-md-offset-3 表格 表单 表单加样式 你只需要记一个 form-control 浮动 pull-left 左浮动 pull-right 右浮动 按钮组 btn btn-颜色 !important 执行优先级最高<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <!--导航条开始--> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">web <span class="sr-only">(current)</span></a></li> <li><a href="#">python</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <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> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">好好学习</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们 <span class="caret"></span></a> <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> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--导航条结束--> <!--页面滑动部份开始--> <div class="container"> <!--巨幕开始--> <div class="jumbotron"> <h1>Jason</h1> <h1>带你学好jQuery</h1> <p><a class="btn btn-primary btn-lg" href="#" role="button">查看更多</a></p> </div> <!--巨幕结束--> <div class="row"> <!--左侧列表栏--> <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item active"> 首页 </a> <a href="#" class="list-group-item">校区简介</a> <a href="#" class="list-group-item">学生列表</a> <a href="#" class="list-group-item">课程列表</a> <a href="#" class="list-group-item">更多详情</a> </div> </div> <!--右侧目列表--> <div class="col-md-9"> <div class="panel panel-primary"> <div class="panel-heading">学生管理系统</div> <div class="panel-body"> <!--搜索栏--> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <input type="text" class="form-control" id="exampleInputAmount" placeholder="筛选条件"> </div> </div> <button type="submit" class="btn btn-primary">搜索</button> <button type="button" class="btn btn-success pull-right">新增</button> </form> <br> <!--表格--> <table class="table table-hover table-bordered table-striped"> <thead> <tr class="active"> <th>id</th> <th>姓名</th> <th>课程</th> <th>爱好</th> <th class="text-center">操作</th> </tr> </thead> <tbody> <tr class=""> <td>1</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> <tr class=""> <td>2</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> <tr class=""> <td>3</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> <tr class=""> <td>4</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> <tr class=""> <td>5</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> <tr class=""> <td>6</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> <tr class=""> <td>7</td> <td>jason</td> <td>python</td> <td>学习</td> <td class="text-center"> <button type="button" class="btn btn-warning">编辑</button> <button type="button" class="btn btn-danger">删除</button> </td> </tr> </tbody> </table> <div class="text-center"> <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> </div> </div> </div> </div> <hr> <div> <form> <div class="form-group"> <label for="exampleInputEmail1">注册邮箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上传头像</label> <input type="file" id="exampleInputFile"> <p class="help-block">只支持img格式</p> </div> <div class="checkbox"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <br> <div class="panel panel-primary"> <div class="panel-heading"> 课程评价 </div> <div class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" value="">一点都不难 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">非常简单 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">一学就会 </label> </div> </div> </div> </div> </div> </div> </body> </html>
