响应式网站设计---Bootstrap

响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性。

使用基于Bootstrap的栅格系统

Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。

1. 栅格系统的工作原理

(1)行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列内补(padding)。 
(2)通过行(row)在水平方向创建一组列(column)。 
(3)自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。 
(4)类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。
(5)通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。 
(6)栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。 
(7)如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。 
(8)栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。

 <div class="container">

            <h1>Hello, world!</h1>

            <div class="row">

               <div class="col-md-3" style="background-color: #dedef8;box-shadow:
                  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                  <h4>第一列</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
               </div>

               <div class="col-md-9" style="background-color: #dedef8;box-shadow:
                  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                  <h4>第二列 - 分为四个盒子</h4>
                  <div class="row">
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>Consectetur art party Tonx culpa semiotics. Pinterest
                           assumenda minim organic quis.
                        </p>
                     </div>
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p> sed do eiusmod tempor incididunt ut labore et dolore magna
                           aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                           ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                     </div>
                  </div>

                  <div class="row">
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>quis nostrud exercitation ullamco laboris nisi ut
                           aliquip ex ea commodo consequat.
                        </p>
                     </div>
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                           sed do eiusmod tempor incididunt ut labore et dolore magna
                           aliqua. Ut enim ad minim.</p>
                     </div>
                  </div>

               </div>

            </div>

         </div>

原文地址:https://www.cnblogs.com/xcsg/p/10804472.html

时间: 2024-10-11 23:47:47

响应式网站设计---Bootstrap的相关文章

响应式网站设计原则

在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则.Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用:嵌入式HTML 5,使用PhoneGap或者类似的工具:在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向. 分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTML 5.JavaScript和CSS创建

浅析响应式网站布局Bootstrap

bootstrap是一款依赖于jquery开发的一款响应式网页布局的插件,可以针对不同的屏幕尺寸调整你的页面,使其在个尺寸屏幕上表现良好. 从bootstrap官方网站来看,bootstrap主要有下面几部分组成: CSS--Bootstrap为我们预实现了很多CSS样式.包括一些图片以及网站的响应式布局. 组件--Bootstrap为我们预实现了很多CSS组件.如下拉框.按钮组.导航等.也就是说Bootstrap内容帮我们定义好了很多CSS样式,你可以将这些样式直接应用到之前的下拉框等元素里.

响应式网站设计

关于media的各种写法:css2中和css3中 http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 使用media queries的网站锦集 http://mediaqueri.es/ 慕课网 viewport 表示可视区域,通常情况下,苹果手机如果viewport中content不设置内容的话,我们的width:980px会缩小一倍,然后看上去正常. 但是如果width:320的宽度的话,也会缩小一倍,比如图所示

响应式网站设计 - 最佳实践

一.移动优先 手机设计稿通常更为简约,由手机设计稿开始制作简单版本,随着平板和桌面的引入,页面慢慢复杂,这是一个递增的过程,前期把精力放到核心模块上,默认打开简洁的手机样式,而负责的样式包裹在media query中,所以不会加载,这样访问速度是最佳的 .content { /*basic effects designed for mobile devices*/ } @media screen and (min-width: 400px) { /*complicate effects for

7 个 Bootstrap 在线编辑器用于快速开发响应式网站

Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? 这就是Bootstrap 编辑器的用武之地. Bootstrap 编辑器和生成器使得画界面原型.测试.搭建响应式网站变得简单. 尽管每一个编辑器都不同,但是它们都利用Bootstrap 庞大的组件库实现了拖入和移除组件功能. 在这篇文章中,我们总结了一些目前市场上最好的 Bootstrap 编辑器

响应式站点设计之使用指南

自从 Ethan Marcotte创造了这个词(响应式)以来,我们一直在寻找如何真正的设计出一个响应式网站,5年之后人们正式定义并且认可了这个词,我们现在能正确的理解这个词的意义,其旨在创建响应式APPS. 问题是:它并不是真正的工具(就像frameworks和effects),它与经验相关.直到几年前,没有人去关心转化率这些,我们是为了设计而设计的.我们旨在创建漂亮的网站,不多也不少. 但是在这数十年的转变中,我们才开始意识到乔布斯当时所说的意义: 我们早在2006年就明白了一个网站的设计95

响应式Web设计(Responsive Web design)的理念

页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备:换句话说,页面应该有能力去自动响应用户的设备环境.响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了

【经验分享】响应式网站项目实操过程中的那些事儿

本次网站改版升级是我来到新公司的第一个项目,需求之初并没有提及要做响应式,在首次评审时领导和研发均认为响应式处理与我们网站相对契合,就这样我开始了我职场生涯中第一个响应式网站设计.下面就跟大家分享响应式网站设计中的那些事儿. 因为本人之前并没有接触过响应式设计,在项目开始前便恶补了一些响应式的基础知识.理论性资料网上众多,为了使各位对响应式有初步印象和认知,我在这里只做简单描述,各位若想要更全面深入的了解可自行百度. 1什么叫响应式设计,为什么要做响应式设计 (1)页面的设计和开发应当根据用户行

使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading"> <div class="col-md-12"> <h2>更多信息</h2> <p class="lead"> 广州恒大淘宝队的官方网站和微博同时发布了几张海报,预热本周三晚8点即将到来的亚冠1/4决赛第二回