1.1 案例二:使用BootStrap设计一个响应式的页面:1.1.1 需求:
设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式.
1.1.2 分析:1.1.2.1 技术分析:
【BootStrap的概述】
Ø 什么是BootStrap
JavaWeb05-HTML篇笔记(二)
Ø BootStrap可以在那些地方使用:
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
Ø BootStrap的使用:
下载BootStrap:
JavaWeb05-HTML篇笔记(二)
引入的文件
JavaWeb05-HTML篇笔记(二)
添加一个<meta>标签:
JavaWeb05-HTML篇笔记(二)
【BootStrap的全局CSS】
BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
Ø 布局容器:
JavaWeb05-HTML篇笔记(二)
Ø 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局
使用.row样式定义栅格的行.
定义列:.col-lg-n .col-md-n  .col-sm-n   .col-xs-n
JavaWeb05-HTML篇笔记(二)
Ø 排版:
JavaWeb05-HTML篇笔记(二)
JavaWeb05-HTML篇笔记(二)
JavaWeb05-HTML篇笔记(二)
JavaWeb05-HTML篇笔记(二)
【BootStrap的组件】
【BootStrap的JS的插件】
1.1.3 代码实现

相关文章:

  • 2021-07-07
  • 2022-12-23
  • 2021-08-28
  • 2021-06-05
  • 2021-11-04
  • 2021-04-19
  • 2022-01-23
猜你喜欢
  • 2022-12-23
  • 2021-07-21
  • 2021-05-23
  • 2022-01-23
  • 2021-12-02
  • 2021-10-31
  • 2021-09-25
相关资源
相似解决方案