• Java后端 学习路线 笔记汇总表【黑马程序员】
  1. Bootstrap学习笔记01【快速入门、栅格布局】【day01】
  2. Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网】【day01】

目录

03 Bootstrap_全局CSS样式

Bootstrap_全局CSS样式_按钮

Bootstrap_全局CSS样式_表格

04 Bootstrap_组件和插件

Bootstrap_组件_导航条&分页条

导航条

分页条

Bootstrap_插件_轮播图

05 案例_黑马旅游网

案例_黑马旅游网_分析

案例_黑马旅游网_页眉部分

案例_黑马旅游网_主体&页脚部分

主体部分

页脚部分

黑马旅游网——首页代码

03 Bootstrap_全局CSS样式

Bootstrap_全局CSS样式_按钮

如果你觉得xxx样式可以，从官网上 复制过来，就完事了 ~

   

CSS样式和JS插件

全局CSS样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%（响应式）
        *  图片形状
            *  <img src="..." alt="..." class="img-rounded"> ：方形
            *  <img src="..." alt="..." class="img-circle">  ：圆形
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框
    * 表格
    * 表单
2. 组件：
    * 导航条
    * 分页条
3. 插件：
    * 轮播图

  

Bootstrap_全局CSS样式_表格

CSS样式和JS插件

1. 全局CSS样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%（响应式）
        *  图片形状
            *  <img src="..." alt="..." class="img-rounded"> ：方形
            *  <img src="..." alt="..." class="img-circle">  ：圆形
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框
    * 表格
        * table
        * table-bordered：表格边框
        * table-hover：表格悬浮变色
    * 表单
        * 给表单项添加：class="form-control" 
2. 组件：
    * 导航条
    * 分页条
3. 插件：
    * 轮播图

  

04 Bootstrap_组件和插件

Bootstrap_组件_导航条&分页条

导航条

<!DOCTYPE html>
<html lang="zh-CN"><head><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 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="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="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</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><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</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></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></body>
</html>

分页条

  

<!DOCTYPE html>
<html lang="zh-CN"><head><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 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script></head><body><nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li class="active"><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">&raquo;</span></a></li></ul></nav></body>
</html>

Bootstrap_插件_轮播图

<!DOCTYPE html>
<html lang="zh-CN"><head><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 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script></head><body><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><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></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></body>
</html>

05 案例_黑马旅游网

案例_黑马旅游网_分析

案例_黑马旅游网_页眉部分

  

案例_黑马旅游网_主体&页脚部分

主体部分

页脚部分

黑马旅游网——首页代码

  

<!DOCTYPE html>
<html lang="zh-CN">
<head><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 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><style>.paddtop {padding-top: 10px;}.search-btn {float: left;border: 1px solid #ffc900;width: 90px;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><!-- 1.页眉部分--><header class="container-fluid"><div class="row"><img src="img/top_banner.jpg" class="img-responsive"></div><div class="row paddtop"><div class="col-md-3"><img src="img/logo.jpg" class="img-responsive"></div><div class="col-md-5"><input class="search-input" placeholder="请输入线路名称"><a class="search-btn" href="#">搜索</a></div><div class="col-md-4"><img src="img/hotel_tel.png" 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><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></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><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></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"><span>黑马精选</span></div><div class="row paddtop"><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-3"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div><div class="row jx"><img src="img/icon_6.jpg"><span>国内游</span></div><div class="row paddtop"><div class="col-md-4"><img src="img/guonei_1.jpg"></div><div class="col-md-8"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div><div class="col-md-4"><div class="thumbnail"><img src="img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><font color="red">&yen; 699</font></div></div></div></div></div></div><!-- 3.页脚部分--><footer class="container-fluid"><div class="row"><img src="img/footer_service.png" class="img-responsive"></div><div class="row company">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</div></footer>
</body>
</html>

加油~

Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】相关推荐

  1. 前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》

    一.Bootstrap要点 1.bootstrap全局CSS样式 2.bootstrap CSS组件 3.bootstrap javascript插件 其实就是官网上的这三个. 二.项目引入Boots ...

  2. 【CSS】学习笔记1 使用CSS样式表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》

    一.排版 1.标题(.page-header) 从<h1>到<h6>均可使用page-header样式. <body><div><h1 class ...

  4. 前端基础之《Bootstrap（6）—全局CSS样式_表单》

    一.基本 1.基本表单(.form-group) 2.输入框的样式(.form-control) 3.表单浅灰色占位符(placeholder属性) 4.单选框(.checkbox) 5.多选框(.r ...

  5. Bootstrap学习笔记01【快速入门、栅格布局】

    Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

  6. JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】

    Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...

  7. BootStrap 学习笔记（一）

    BootStrap学习大纲: 1.css样式 布局容器:container 1)栅格系统 栅格系统就是BootStrap把一个div最多分成12列,其中主要的样式 col-md-数字 用的最多,其他( ...

  8. HTML/CSS学习笔记02【表单标签】

    w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

  9. bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版

    http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...

最新文章

  1. 在CentOS 6.3 64bit上搭建python高性能框架gevent开发环境
  2. svn服务器发生变更，如何切换
  3. 推荐8个冷门但硬核的软件和网站，你一定不能错过！
  4. 中国无人驾驶货运完成横穿全美壮举！智加重卡，历经昼夜端到端运送生鲜
  5. python界面开发工具免费_Python程序员必备的四款开发工具
  6. vue中v-model指令的使用之Vue知识点归纳(九)
  7. JS面向对象的程序设计之创建对象_工厂模式，构造函数模式，原型模式-1
  8. tp3.2 URL生成
  9. li标签中，img居中显示
  10. postgres关键字、常量和数据类型
  11. 关于刷微信投票的js代码
  12. CMD查看局域网在线IP
  13. [IOT] 自制蓝牙工牌办公室定位系统 （一）—— 阿里物联网平台概览及打通端到云（硬核·干货）
  14. 如何执行 Visual Paradigm 的静默安装丨安装教程
  15. 【数字图像处理】实验一 图像的平移，缩放和旋转(vs2017+opencv)
  16. 便捷建筑工程行业招采管理，供应商协同平台精准匹配企业需求，撮合交易
  17. Cisco网站系统测试考试题目及答案
  18. oracle数据文件离线,oracle数据库的文件在哪里
  19. 微信小程序在iOS端，出现SSL错误，无法建立安全连接的问题解决
  20. 如何layui下select下拉框不显示或没有效果怎么办

热门文章

  1. Android实现相册分享功能,Android系统自带分享功能的实现（可同时分享文字和图片）...
  2. java 封装优化工具_利用Java注解的简单封装的一次优化
  3. mysql数据库安全配置文件_MySQL数据库安全配置
  4. 一、使用两台Centos7系统搭建Hadoop-3.1.4完全分布式集群
  5. 二十五、爬取毛豆新车的数据
  6. 五、开始学习Excel函数，效率快速提高
  7. 五十四、最基础的冒泡排序
  8. tornado函数和类的导入和ui_modules  ， ui_methods
  9. keras从入门到放弃(十一）电影评价预测
  10. 自监督和语言监督我全都要？Facebook多模态预训练模型SLIP给你答案！