JavaEE Day11 BootStrap

之前:前端知识
HTML+ CSS+JavaScript
          不好写
今日内容:前端的开发框架,内部定义了丰富的CSS样式和JS代码,只需要拿来用就行
会用即可
一、BootStrap
1、概念:一个前端开发的框架
百度百科:Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
  • 框架:一个半成品软件,开发人员可以在框架基础上再进行开发,简化编码
  • 好处
    • 定义了很多的css样式和js插件,开发人员可以直接使用这些样式和插件得到丰富的页面效果https://v3.bootcss.com/css/#buttons
    • 响应式布局
      • 同一套页面可以兼容不同的设备
      • (非响应式布局www.taobao.com   www.m.taobao.com)
      • (响应式布局www.apple.com)
      • 实现:依赖于栅格系统
2、快速入门
  • 下载BootStrap
    JavaEE Day11 BootStrap_第1张图片
  • 在项目中将这三个文件夹复制到项目根目录
  • 创建html文件,引入必要的资源文件
    JavaEE Day11 BootStrap_第2张图片
  • 带min和不带min的区别
    • 不带min的格式比较良好【阅读源码】
    • 带min的体积比较小【项目引用】



    
    
    
    
    
    Bootstrap HelloWorld

    
    
    

    
    
    
    
    
    
    
    
    
    


你好,世界!

二、响应式布局
1、栅格系统
  • 同一套页面可以兼容不同的设备
  • 实现:依赖于栅格系统:将一行平均分为12个格子,可以指定元素占几个格子
  • 步骤
    • 定义容器,相当于之前的table
      • 容器的分类
        • container:两边留白的固定宽度 www.itcast.com  www.taobao.com 
        • container-fluid:每一种设备都是100%的宽度
    • 定义行,相当于之前的tr,样式:row
    • 定义元素,指定该元素在不同的设备上所占的格子数目【通过CSS样式定义容器行和容器样式】
      • 样式:col-设备代号-格子数目(1~12)
      • 设备代号(笑死me了)
        • xs:超小屏幕  手机(<768px)   :col-xs-12
        • sm:平板 (≥768px) col-sm-12
        • md:桌面显示器  (≥992px) :col-md-12
        • lg:大显示器(≥1200px)  :col-lg-12



    
    
    
    
    
    Bootstrap HelloWorld

    
    
    

    
    
    
    
    
    
    
    
    
    
    


    
    
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
效果
JavaEE Day11 BootStrap_第3张图片
苹果效果
JavaEE Day11 BootStrap_第4张图片
JavaEE Day11 BootStrap_第5张图片
注意:
  • 一行中如果格子数目 超过12,则超出部分自动换行
  • 栅格的类属性可以向上兼容
  • 如果真实设备宽度小于栅格的类属性设备代号最小值,会一个元素占满一整行
2.全局的 CSS样式
  • 按钮:class="btn btn-default"
  • 图片
    • class="img-responsive":图片在任意尺寸都占100%,响应式图片
    • 图片形状
      • ...:方形
      • ...:圆形
      • ...:相框
  • 表格
    • table
    • table-bordered:边框
    • table-hover:悬浮
  • 表单
    • 给表单项添加class="form-control"属性
    • 整个表单项在class="form-group"中,效果更好
3.组件
  • 导航条
  • 分页条
4.插件
Carousel轮播图
三、案例:黑马旅游网
JavaEE Day11 BootStrap_第6张图片
留白--container
JavaEE Day11 BootStrap_第7张图片
JavaEE Day11 BootStrap_第8张图片
栅格系统:整个是一行,一行分为两个格子(4+8)
container-fluid百分百



    
    
    
    
    
    Bootstrap HelloWorld

    
    
    

    
    
    
    
    
    
    
    
    
    
    


    
    
    
    
黑马精选

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899
国内游

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899

上海直飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 899
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
来自为知笔记(Wiz)

你可能感兴趣的:(java-ee,bootstrap,javascript,前端,html)