响应式布局之BootStrap

本文在于巩固基础

学习bootStrap官网http://getbootstrap.com/

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

而bootStrap是响应式布局的一个很好框架

优点和缺点

优点

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

时间： 2024-08-14 19:49:50

响应式布局之BootStrap的相关文章

响应式布局及bootstrap

bootstrap:移动端有限.没有ID选择器,就算有也是 通过class名称来的容器 container ,row要放在容器container中,且一个网页只允许有一个container 禁止响应式布局:1,写一个宽度:2,去掉<meta·······>.col-xs:禁用超小模式 所有JavaScript插件都依赖于jQuery 基本模板[移动端上写代码,都要写mate viewport] 定制Bootstrap js放在body结束标签之前 HTML5文档类型<htmmml lan

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

0083 移动端WEB开发之响应式布局、bootstrap

移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列

响应式布局---2. Bootstrap前端开发框架

1.1 介绍 Bootstrap来自Twitter,是目前最受欢迎的前端框架.Bootstrap是基于HTML.CSS和JAVASCRIPT的,它简洁灵活,使得web开发更加快捷. 中文官网:http://www.bootcss.com/ 官网:http://getbootstrap.com/ 推荐使用:https://v3.bootcss.com/ 1.2 使用 控制权在框架本身,使用者要按照框架所规定的某种规范进行开发 Bootstrap使用四部曲: 1.2.1 创建文件夹结构 在https

基于Bootstrap3制作响应式布局网站（一）

前言 原创文章,欢迎转载,请保留出处. 有任何错误.疑问或者建议,欢迎指出. 我的邮箱:[email protected] 现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷.Bootstrap是Twitter推出的一个用于前端开发的开源工具包,其中的一个特性就是支持响应式布局. 何为响应式布局 我们可以查阅百度百科得到比较权威的解析: 响应式布局是Ethan Marcotte在2010年5

巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

关于bootstrap和响应式布局

bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

Bootstrap响应式布局

Bootstrap响应式布局可以使用栅格化系统,在桌面>970px上变为水平排列,方法: 1.包含在.container或.container-fluid中 2.使用.col-md-*栅格类,创建栅格系统 典型布局: <div class="container"> <div class="row"> <div class="col-md-4">d</div> <div class=&qu

Bootstrap禁用响应式布局

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev