微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）

该页面适用于 PC端和移动端，在响应式开发的媒体查询下能够适配所有屏幕。

一、页面效果

二、结构样式说明 (需引入bootstrap 相关样式文件)

结构分为八块：

头部块：.wjs_header

导航条：.wjs_nav

轮播图：.wjs_banner

信息块：.wjs_info

预约块：.wjs_reverse

产品块：.wjs_product

新闻块： .wjs_news

合作伙伴： .wjs_partner

栅格系统：就是用来描述设置当前子元素在指定屏幕下，占据当前屏幕默认12等分中的 n（1-12取值）等分

width > 1200 : lg

width (992-1200) : md

width (768-992) : sm

width < 768 : xs extra small (超小屏幕)

格式 col-md-4 (设置当前div占据当前md屏幕下12等分中的4等分)

如需在哪个屏幕隐藏就用： hidden-xs / hidden-sm / hidden-md

头部块：.wjs_header (bootstrap 全局css样式中的 栅格系统 支持响应式布局)
不是全屏用.container
导航条：.wjs_nav （bootstrap 组件中的 导航条）在移动端要具有手风琴效果
1. 导航条相关注释说明：
  class="navbar-toggle collapsed"：说明在移动端会有手风琴菜单的效果
  data-toggle="collapse"：它是一个手风琴组件
  data-target="#bs-example-navbar-collapse-1":说明当前手风琴菜单是控制哪一个导航条的
2. 效果（bootstrap中导航条要进行相应的结构样式修改）：
轮播图：.wjs_banner （Bootstrap 插件中的Carousel ）
为了实现在移动端和pc端轮播图片的不同变化参考：
https://blog.csdn.net/weixin_45026839/article/details/113861560
pc端（w>768px）：图片做为背景，当屏幕宽度变宽的时候，会显示更多的图片的两边区域

移动端（w<768px) :图片会随着屏幕的缩小自动适应–缩小做法：将img的宽度为100%,通过img标签来实现
信息块: .wjs_info (栅格系统)
不是全屏用 .container .row 在超小屏幕下隐藏添加class="hidden-xs"
预约块： .wjs_reverse (栅格系统 .container .row) 超小屏幕下隐藏
产品块：.wjs_product (使用Bootstrap 组件中的标签页 和工具提示 iscroll.js 实现滑动)
1 .去除背景： background-color : transparent ; <b> 加粗标签 <sub>下标
2 .导航条具有水平滑动效果参照：https://blog.csdn.net/weixin_45026839/article/details/113993101
3 .4 .工具提示参考：https://blog.csdn.net/weixin_45026839/article/details/114126311
新闻块：.wjs_news (栅格系统 .container 和标签页)

怎么把一个结构从左中右结构切换成上中下结构？

当你使用了栅格系统 container 将屏幕宽度缩小到 992px时默认宽度为100% ，所以会自动换行。

合作伙伴: .wjs_partner (.container )

三、相关代码资料：
链接：https://pan.baidu.com/s/1OOgCofrd6Mn33xg7tcJCsg
提取码：rk3s

微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）相关推荐

六、WebApp 二手信息站点页面制作（IVX 快速开发教程）
六.二手信息站点页面制作在了解了基础可视组件后,我们可以通过这些可视组件进行站点页面开发,在此以一个二手交易网站站点页面为例,本教程示例并不是成熟完善的示例,需要各位读者进行少量完善,示例只是用于功 ...
@select注解_Mybatis基本知识十七：Mybatis注解式开发-单表注解式开发
上一篇文章:<Mybatis基本知识十六:查询缓存之第三方查询缓存> 若文中有纰漏,请多多指正!!! 1.前言使用Mybatis进行开发,不仅可以使用mapper配置文件进行开发,也可以 ...
微金所案例总结——Bootstrap应用模板引擎的使用
文章目录自定义字体图标(@font-face) Vertical-align复习模板引擎动态添加轮播图需求分析 ui框架&模板引擎转JSON格式数据获取轮播图数据(ajax) 根据数 ...
阿里百秀响应式页面制作
文章目录案例:阿里百秀移动端首页一.技术选型二.需求分析 1.页面布局分析 2.屏幕划分分析三.页面制作 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容 he ...
从零开始学 Web 之移动Web（九）微金所案例
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
移动WEB开发五、响应式布局
零.文章目录文章地址个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
linux字体栅格化,响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言...
1.响应式开发介绍 a.网页布局方式 b.响应式布局优点:用一个页面适配不同终端的展示缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的 ...
使用html5静态页面的总结,幸福西饼：静态页面制作项目总结
在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多. 这个项目主要是复刻[幸福西饼]的主站和产品列表页,纯静态页面, ...
瀑布式开发、迭代式开发、螺旋开发、敏捷开发四种开发模式的区别
1.瀑布模型是由W.W.Royce在1970年最初提出的软件开发模型,瀑布模型式是最典型的预见性的方法,严格遵循预先计划的需求分析.设计.编码.集成.测试.维护的步骤顺序进行. 步骤成果作为衡量进度的 ...

微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）

微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）相关推荐

最新文章

热门文章

微金所页面制作（Bootstrap 响应式开发 栅格布局 响应式布局）

微金所页面制作（Bootstrap 响应式开发 栅格布局 响应式布局）相关推荐

最新文章

热门文章

微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）

微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）相关推荐