bootstrap响应式设计简单实践。

时间:2022-11-07 10:52:17

首先需要熟悉Boostrap提供的响应式设施:http://getbootstrap.com/css/#responsive-utilities,BootStrap的响应式设施主要是利用媒体查询对元素的可见性和inline or block显示做变换处理。在mobile屏下面主要做以下几个处理:

1、原先row内行布局的div变成列布局,我一般喜欢以sm(750px)作为基准,所以这一点的实现很简单,在使用col-xx-number的xx一般使用sm即可。

2、在mobile界面下某些影响手机页面显示的琐碎内容直接隐藏掉,如果以sm的750px作为基准,那这些元素的class直接加上hidden-xs 即可

3、某些只需要在mobileWeb下显示的东西需要显示出来,这个需要使用visible-xs-*这个class标签

4、以前纵向布局的需要横向布局,最明显的莫如左侧导航栏,这个东西可以借鉴bootstrap媒体查询的写法写个xs-inline的标签,也可以visible-xs-*的多个标签组合来达到这个目的。

bootstrap响应式设计简单实践。的更多相关文章

  1. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  2. bootstrap响应式布局简单实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  4. paip&period;自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  5. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  6. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

  7. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  8. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  9. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. MySQL数据库迁移(转)

    MySQL数据库迁移(数据文件直接迁移) 在今年10月下旬的时候,公司的服务器需要迁移,其中涉及到了MySQL数据库迁移.查看了一下MySQL数据文件的大小,接近60G的大小(实际数据并没用那么多). ...

  2. PL SQL笔记&lpar;三&rpar;

    loop then .. exit; end if; end loop; select to_char(sysdate, 'YYYY-MM-DD HH24:MI:SS') from dual; sel ...

  3. KMP算法——字符串匹配

    正直找工作面试巅峰时期,有幸在学校可以听到July的讲座,在时长将近三个小时的演讲中,发现对于找工作来说,算法数据结构可以算是程序员道路的一个考量吧,毕竟中国学计算机的人太多了,只能使用这些方法来淘汰 ...

  4. 写一个带文本菜单的程序&comma;菜单项如下 &lpar;1&rpar; 取五个数的和 &lpar;2&rpar; 取五个数的平均值 &lpar;X&rpar; 退出。

    问题: 写一个带文本菜单的程序,菜单项如下(1)    取五个数的和 (2)     取五个数的平均值(X)    退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...

  5. yarn如何全局安装命令以及和环境变量的关系

    npm全局安装 npm i -g xxx yarn 全局安装 yarn global add xxx 然而你可能会发现npm全局安装后的命令可以直接使用,而yarn却不行,这是为什么呢? 我们来查看下 ...

  6. 云服务器--linux系统操作命令以及安装ngnix记录,以及手动部署本地文件

    1.控制台登陆服务器,需要首先知道服务器ip和密码,,命令是 ssh root@1.1.1.1(服务器IP),然后输入密码登入服务器 2.查看linux 版本的系统命令是 cat /etc/redha ...

  7. bzoj4358 premu

    题目链接 莫队算法 没有用线段树,而是看了showson的并查集%%% #include<algorithm> #include<iostream> #include<c ...

  8. MVC源码分析 - Action查找和过滤器的执行时机

    接着上一篇, 在创建好Controller之后, 有一个 this.ExecuteCore()方法, 这部分是执行的. 那么里面具体做了些什么呢? //ControllerBaseprotected ...

  9. SpringBoot-04:SpringBoot在idea中的俩种创建方式

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 创建SpringBoot工程有很多种方式,我只讲俩种最为常见的 一,依托springboot官网提供的模板.( ...

  10. centos7&period;2进入单用户模式修改密码

    1 - 在启动grub菜单,选择编辑选项启动 2 - 按键盘e键,来进入编辑界面 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh 4 - 现在按下 Co ...