Bootstrap 流动布局

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

时间： 2024-10-18 12:38:54

Bootstrap 流动布局的相关文章

Bootstrap页面布局3 - BS布局

1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示: 2.给需要的元素添加一个容器,使其居中显示 <div class='container'> <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> </div&g

嵌套布局: 在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是 4,4,4 现在有一个需求,要在第三列中另外再布局出2列,且这2列宽度相同那么操作如下:看彩色部分 <div class='row'> <div class='span4'> <h2>栏目一</h2> <p>段落1</p> </div> &

流动布局

之前的布局都是固定了,不管实际页面的大小如果要改成流动布局,只需要将 container 类改成 container-fluid 即可然后把 row 类改成 row-fluid 所谓流动布局,就是其不再是固定像素大小,而采用了百分比一旦改成了流动布局后,神奇的一幕就出现了,当我们去改变浏览器大小的时候,内容随着浏览器大小的变化而变化!!真棒! <!DOCTYPE html> <html lang="en"> <head> <meta ch

Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计: 比如: 分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px 在平板电脑的垂直状

固定布局，流动布局，弹性布局

打造无懈可击的web设计——流动布局和弹性布局 http://blog.csdn.net/qinghuawenkang/article/details/7557087 转: 自适应css布局—-流动布局新时代(译文) http://justcoding.iteye.com/blog/1825188 应运而生的web页面响应布局 http://www.zhangxinxu.com/wordpress/2011/09/页面响应布局/ 固定布局.流动布局.弹性布局哪一种适合你(上) http://ww

Bootstrap页面布局24 - BS旋转木马功能

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/

网页布局之---固定布局、流动布局、弹性布局(转)

原文地址有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 为什么要争论这些?网页设计受可用性的大棒指引,而由于网站用户的多样性,已经很难做出对不同用户都有足够可用性的网站. 当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨

Bootstrap页面布局23 - BS折叠内容

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3>  <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c

Bootstrap页面布局21 - BS对话框设计

设计弹出层对话框: 设计一个点击登录按钮,再弹出一个登陆对话框的实例,且带有动画效果 <div class='container-fluid'> <h2 class='page-header'>对话框插件的调用</h2> <a href='#login' data-toggle='modal' class='btn btn-primary'>登录</a> <div class='modal hide fade' id='login'>