Bootstrap响应式布局以及栅格框架

一、Bootstrap简单配置
简单使用Bootstrap,只需引入:

    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/bootstrap.js" ></script>
    <link rel="stylesheet" href="css/bootstrap.css" />

为什么要引入<link rel="stylesheet" href="css/bootstrap.css" />呢?举一个简单的例子:
我们利用Bootstrap,写一个简答的div:

        <div class="container">
            <h1>Bootstrap学习</h1>
            <p>
                以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
            </p>
    </div>

通过调节浏览器窗口的大小,我们可以看到,Bootstrap是对样式为container有着响应式布局的。
二、Bootstrap栅格布局
我们在.container中定义类似table的div单元格row(行)与col(列)-md(屏幕尺寸:可以设置手机、平板等设备)-4(以12等分当前窗口,若超过12份会自动下排)...可以实现简单的栅格布局,例如:

<div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2 hidden-lg"><!--hidden-sm当屏幕小到sm时,该div隐藏 -->
                    <h1>侧边栏</h1>
                    <p>
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                    </p>
                </div>
                <div class="col-sm-6 col-md-8 col-lg-10 ">
                    <h1>Bootstrap学习</h1>
                    <p>
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                    </p>
                    <div class="row">
                            <div class="col-sm-6 col-md-4 col-lg-2">
                                <h3>Bootstrap学习</h3>
                                <p>
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                </p>
                            </div>
                            <div class="col-sm-6 col-md-4 col-lg-2 col-lg-offset-1 alert-danger"><!--alert-danger给该div一个醒目色块-->
                                <h3>Bootstrap学习</h3>
                                <p>
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                </p>
                            </div>
                            <div class="col-sm-6 col-md-4 col-lg-2">
                                <h3>Bootstrap学习</h3>
                                <p>
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                    以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                                </p>
                            </div>
                            <div class="visible-md"><!--当屏幕到 某个尺寸 时,显示该div-->
                                <h2>屏幕到了这个尺寸了</h2>
                                <p>只有尺寸合适才能看到哦</p>
                            </div>
                    </div>
                </div>
            </div>
        </div>          <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2"><!--混合使用,自适应当前设备-->
                    <h1>Bootstrap学习</h1>
                    <p>
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                    </p>
                </div>
                <div class="col-sm-6 col-md-8 col-lg-2">
                    <h1>Bootstrap学习</h1>
                    <p>
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                        以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
                    </p>
                </div>
            </div>
        </div>

实现的效果:

可以针对屏幕微调位置栅格位置,左边右推一格col-md-push-1,右边左拉一格col-md-pull-1左推右拉都是绝对位置,而偏移col-md-offset-1是相对的会同步修改后续内容的位置。栅格如table可以嵌套使用,同样也有着网站的响应式布局。
此篇文章只是入门笔记!

原文地址:http://blog.51cto.com/13479739/2151281

时间: 2024-10-15 14:03:50

Bootstrap响应式布局以及栅格框架的相关文章

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页面布局7 - Bootstrap响应式布局的实用类

在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visible-tablet: 在平板电脑上显示这个元素,在其他设备上隐藏该元素 .visible-desktop: 在桌面电脑上显示这个元素,在其他设备上隐藏该元素 .hidden-phone: 在智能手机上隐藏,在其他设备上显示该元素 .hidden-tablet: 在平板电脑上隐藏,在其他设备上显示该元

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

创建响应式布局----使用栅格

1.Pure Grids : 创建你所需栅格系统的环境,CSS框架 2.BootStrap 3.Foundation:发布了一些优秀的模态.灯箱和内容滑块的解决方案:用于创建一个流式12列栅格 4.Gridpak:根据你的输入生成栅格系统 5.Golden Grid System:一个易于使用的18列栅格,旨在支持从小屏幕到比2560px更高分辨率的各种屏幕 6.Frameless:处理灵活的响应式布局 7.响应式设计具有弹性.灵活的特点:自适应布局则是固定.静态的.或者在布局上体现出严谨 8.

bootstrap响应式布局原理

百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解释:Bootstrap提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列. 栅格系统的工作原理: 1.行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(

Bootstrap 响应式布局

1.保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse.navbar-collapse两个类名.最后为这个div添加一个class类名或者id名. 2.保证在窄屏时要显示的图标样式(固定写法): 1 <button class="navbar-toggle" type="button" data-toggle="collapse"> 2 <span class="sr-only&q

Bootstrap响应式布局(1)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练作品</title> <meta charset="utf-8" /> <meta name="viewport"

css模拟Bootstrap响应式布局——栅格

做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下,用的是max-width.min-width子元素的宽度设置为不同的百分比,模拟栅格的12列.把100划分12份,用浮动宽度超出会自动换行,下面是段代码,以后会认真学习bootstrap.加油!飞燕草 1 <style type="text/css"> 2 #containe

使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适应,这样的话就会出现换行掉下去的情况,不会出现横向滚动条. 1.动态给ul设置宽度 遍历li元素求出所有的li的宽度和,这样就能动态给ul设置宽度. 2.给ul父盒子设置overflow-x:scroll;属性