【Java EE】Day11 BootStrap、响应式布局、栅格系统、CSS样式、案例
一、BootStrap介绍
https://v3.bootcss.com/css/#overview
1、概念
- 基于三剑客开发的前端开发框架
- 定义了许多css样式和js插件，从而得到丰富的页面效果
- 依赖于栅格系统实现响应式布局（设备兼容）
2、快速入门
- 下载并将样式、字体和插件导入项目根目录
- 在html中引入资源文件bootstrap.min.css
二、响应式布局
1、栅格系统
- 一行12个格，可以指定元素占几个格子
- 步骤：
- 定义容器：container（留白）、container-fluid（100%宽度）
- 定义行，使用row
- 定义元素并指定所占格子数目
- CSS的class：col-设备代号-格子数目（1~12）
- 设备代号：xs，sm，md，lg（笑死me了）
<style> /*<!-- 定义css类选择器 -->*/ .inner{ border:1px solid red; } </style> </head> <body> <!--1.定义容器--> <div class="container-fluid"> <!--2.定义行--> <div class="row"> <!--3.定义元素，一行有12个格子 目的：在大的显示器一行12个格子 在pad上，一行6个格子，放不下会自动换行--> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> <div class="col-lg-1 col-sm-2 inner">栅格</div> </div> </div>
- 超过12自动换行
3、全局CSS样式
- 按钮：class="btn btn-default"
- 图片：class="img-responsive"，响应式图片
- 图片形状：方形img-rounded、圆形img-circle、相框img-thumbnail
- 表格：table-bordered边框，table-hover悬浮
- 表单：class="form-control"控制，所有表单项位于class="form-group"中
- 其他组件：导航栏、分页条、轮播图
三、案例：黑马旅游网
<html lang="zh-CN"> <head> <!--固定的meta写法，浏览器支持、设备宽度设置--> <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap HelloWorld</title> <!-- Bootstrap --> <!--验证是否写对，可以按住ctrl，看有没有小手--> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .paddtop{ padding-top: 10px; } .search_btn{ float: left; border:2px solid #ffc900; width:60px; height: 35px; background-color: #ffc900; text-align: center; line-height: 35px; margin-top: 15px; } .search_input{ float: left; border:2px solid #ffc900; width:400px; height: 35px; padding-left:5px; margin-top: 15px; } .jx{ border-bottom: 2px solid #ffc900; padding: 5px; } .company{ height:40px; background-color: #ffc900; text-align: center; line-height: 40px; /*?????*/ font-size: 8px; } </style> </head> <body> <!--页眉100%，内容留白，页脚100%--> <!--1.页眉部分--> <!--使用h5的语义化标签--> <header class="container-fluid"> <!--4行--> <div class="row"> <img src="img/top_banner.jpg" alt="" class="img-responsive"> </div> <div class="row paddtop" > <div class="col-md-3"> <img src="img/logo.jpg" alt="" class="img-responsive"> </div> <div class="col-md-5"> <input type="text" class="search_input" placeholder="请输入线路名称"> <a href="#" class="search_btn">搜索</a> </div> <div class="col-md-4"> <img src="img/hotel_tel.png" alt="" class="img-responsive"></div> </div> <!--导航栏--> <div class="row"> <nav class="navbar navbar-default"> <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> <!-- 发给logo--> <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="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div class="row"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/banner_1.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="img/banner_2.jpg" alt="..."> <div class="carousel-caption"> 兵马俑 </div> </div> <div class="item"> <img src="img/banner_3.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </header> <!--2.主体部分--> <div class="container"> <div class="row jx"> <img src="img/icon_5.jpg" alt=""> <span>黑马精选</span> </div> <div class="row paddtop"> <div class="col-md-3"> <!--相框--> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> </div> <div class="row jx"> <img src="img/icon_6.jpg" alt=""> <span>国内游</span> </div> <!--一行分两个格子--> <div class="row paddtop"> <div class="col-md-4"> <img src="img/guonei_1.jpg" alt=""> </div> <div class="col-md-8"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt=""> <p> 上海直飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机） </p> <font color="red">¥ 899</font> </div> </div> </div> </div> </div> </div> <!--3.页脚部分--> <footer class="container-fluid"> <div class="row"> <img src="img/footer_service.png" alt="" class="img-responsive"> </div> <div class="row company"> 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882 </div> </footer> </body> </html>
本文来自博客园，作者：哥们要飞，转载请注明原文链接：https://www.cnblogs.com/liujinhui/p/14881444.html
