快捷搜索:

①bootstrap学习笔记一下载安装,栅格系统

2019-11-13 09:57栏目:关于澳门金莎
TAG:

认识和引入Bootstrap, 栅格系统,响应式布局

Paste_Image.png

Bootsrap基本应用,Bootsrap应用

用法:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Bootstrap的HTML标准模板</title>   

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">        

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src=";

        <script src=";

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        

        <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->

        <script src=";

        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->

        <script src=";

    </body>

</html>

 

 

标题样式:

Bootstrap中可以通过class名实现h1-h6比如:<div class="h1">Bootstrap标题</div>

 

在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题:

<h1>Bootstrap标题<small>我是副标题</small></h1>

 

.lead   :增大文本字号,加粗;

给文本添加颜色,通过颜色来强调:

.text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

 

文本对其:在CSS中常常使用text-align来实现文本对其,bootstrap中:

Text-left   左对齐

Text-center 居中对齐

Text-right   右对齐

Text-justify  两端对齐

 

Bootstrap提供了一套响应式移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

 

通过class来 操作在相应的屏幕上的布局

手机屏幕(<768px) 类前缀.col-xs-

平板屏幕(>=768px)类前缀.col-sm-

中等屏幕(>=992px)类前缀.col-md-

大屏幕  (>=1200px)类前缀.col-lg-

列数都为12;所有的列(column)必须放在 .row内

<div class=”row”>

<div class=“col-xs-12  clo-md-8  clo-md-6  col-lg-4”>

<div class=“col-xs-12  clo-md-4  clo-md-6  col-lg-4”>

</div>

 

实例:

<div class=”container”>

<div class=”row”>

内容

</div>

</div>

将最外层的布局元素 .container修改为 .container-fluid  就可以将固定宽度的栅格布局转换成100%宽度的布局

偏移:

有时候我们不希望相邻的列紧挨在一起,可以用列偏移(offset)来实现  给要偏移的元素加 .col-md-offset-*   (*号代表需要偏移的列数)

例如:“col-md-offset-4”就是在中等屏幕的时候向右偏移4列

 

列排序:

列排序就是改变列表的方向,就是改变左右浮动,并且设置浮动的距离,通过添加类名实现:

“col-md-push-*”和”col-md-pull-*”(*号代表偏移列数)

向右偏移写push   向左写pull;

 

列的嵌套:

Bootstrap框架还支持列的嵌套

你可以在列中添加一个或者多个行(rom),然后在这个容器中插入列(像前面的一样)

嵌套的列  在写.col-md-*  的时候是按照父盒子的基础上 再进行分配

 

用法: !DOCTYPE html html lang="en" head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" cont...

bootstrap:User Interface Framework用户页面架构

  1.  Bootstrap 是 Twitter 公司于2011年8月开源的整体式前端框架

<h4>Bootstrap的栅格系统,提供了一套响应式、移动设备优先的速式栅格系统:</h4>
<h5><a>一、 移动设备优先</a></h5>
<p>在HTML5的项目中,我们做了移动端的项目,它有一份非常重要的meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。</p>
<h6>//分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width",initial-scale=1,
maximum-scale=1,user-scalable=no”>
</h6>

bootstrap 是什么:

  源代码由LESS预编译

<p><h5><a>二、 布局容器</a></h5></p>
<p>Bootstrap需要为页面内容和栅格系统包裹一个container容器,由于padding等属性的原因,这两种容器类不能相互嵌套。</p>
<pre>//固定宽度
<div class=”container”>
….
</div></pre>

Sleek, intuitive, and powerful front-end framework for faster and easier web development.  点击打开链接  英文

     官网:

<p><h5>例子</h5></p>

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。 点击打开链接  中文网站

  汉化文档:

Paste_Image.png

打开官网,查看各个导航栏中的内容:

  1. 优点

Paste_Image.png

澳门金莎娱乐 1

  功能强大,样式美观

<pre>//100%宽度
<div class=”container-fluid”>
….
</div></pre>
<p><h5>例子</h5></p>

澳门金莎娱乐 2

  简单易用,文档丰富

Paste_Image.png

官网下载:  点击打开链接

  高度可定制性

Paste_Image.png

解压:

  丰富的生态圈

<h6>栅格系统中,浏览器会随着屏幕的大小的增减自动分配<a>最多12列</a>,通过一系列的行和列的组合来创建页面布局。<a>工作原理如下:</a></h6>
<p>1.“行”必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列和内外</p>
<p>2.通过“行”在水平方向创建一组“列”。</p>
<p>3.你的内容应当放置于“列”内,并且,只有“列”可以作为“行”的直接子元素</p>
<p>4.类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。</p>
<p>5.通过为“列”设置padding属性,从而创建列与列之间的间隔,通过为.row元素设置负值margin,从而抵消掉为.container元素设置的padding,也就间接为“行”所包含的“列”抵消掉了padding。</p>
<p>6.负值的margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。</p>
<p>7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。</p>
<p>8.如果一“行”中包含了的“列”大于12,多余的“列”所在的元素将被作为一个整体另起一行排列。</p>
<p>9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何.col-md- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类,因此,在元素上应用任何.col-lg-*不存在,也影响大屏幕设备。</p>

澳门金莎娱乐 3

  1. 版本

<pre>//为了显示明显的css
.a{
Height:100px;
Background-color:#eee;
Border:1px solid #ccc;
}</pre>

澳门金莎娱乐 4

  版本2  立体样式  基于PC端网页,默认不支持响应式,需额外引入,较灵活

<pre>//创建一个响应式行
<div class=”container”>
<div class=”row”>
….
</div>
</div></pre>

文件结构:

  版本3  扁平样式  默认自带响应式,不提供非响应式固定布局。

<pre>//创建最多12列的响应式行
<div class=”container”>
<div class=”row”>
<div class=”col-md-1 a”>1</div>
<div class=” col-md-1 a”>2</div>
<div class=” col-md-1 a”>3</div>
<div class=” col-md-1 a”>4</div>
<div class=” col-md-1 a”>5</div>
<div class=” col-md-1 a”>6</div>
<div class=” col-md-1 a”>7</div>
<div class=” col-md-1 a”>8</div>
<div class=” col-md-1 a”>9</div>
<div class=” col-md-1 a”>10</div>
<div class=” col-md-1 a”>11</div>
<div class=” col-md-1 a”>12</div>
</div>
</div></pre>

[plain] view plaincopy

  1. 引入: 

<p><h5>例子</h5></p>

  1. bootstrap/  
  2. ├── css/  
  3. │   ├── bootstrap.css  
  4. │   ├── bootstrap.min.css  
  5. ├── js/  
  6. │   ├── bootstrap.js  
  7. │   ├── bootstrap.min.js  
  8. └── img/  
  9.     ├── glyphicons-halflings.png  
  10.     └── glyphicons-halflings-white.png  

  <html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" >  // 引入
    </head>
    <body>
      .....
      <script src="jQuery.js"></script>              //放在前面
      <script src="bootstrap.js"></script>
    </body>
  </html>

Paste_Image.png

其中带有 min 字眼的文件是压缩后的版本,文件体积比较小,适合发布时用。

  bootstrap的javascript动态效果是基于jQuery。

引入bootstrap样式前

responsive 为响应式

  引入bootstrap可使用第三方百度CDN服务:

Paste_Image.png

下载jquery:

  Bootstrap2 : ;

引入bootstrap样式后

地址:  点击打开链接

  Bootstrap3 : ;

Paste_Image.png

将它解压到bootstrap 目录下的 js 文件夹下。

  如是国外项目首选Google的CDN服务

<pre>//总列数都是12,每列分配多列
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 a”>1-4</div>
<div class=”col-md-4 a”>5-8</div>
<div class=”col-md-4 a”>9-12</div>
</div>
<div class=”row”>
<div class=”col-md-4 a”>1-8</div>
<div class=”col-md-4 a”>9-12</div>
</div>
</div></pre>
<p><h5>例子</h5></p>

澳门金莎娱乐 5

  1. Bootstrap的栅格系统

Paste_Image.png

下载 html5shiv文件,解压到相应目录:

  5.1 基础

<p>引入bootstrap样式前</p>

澳门金莎娱乐 6

    Bootstrap2 默认不带响应式固定布局的12列栅格系统,栅格宽度60像素,分隔宽度20像素,总宽度940像素(不计算最左侧的分隔宽度)。

Paste_Image.png

编写第一个 start.html文件:

    <div >  居中容器

<p>引入bootstrap样式后</p>

引入bootstrap的css, js 文件,和引入html5shiv文件(适应IE浏览器某版本不支持html5技术),引入jquery

      <div >        //使用栅格系统需元素 包裹

Paste_Image.png

[html] view plaincopy

        <div >左边内容</div>

<p>栅格系统最外层区分了四种宽度的浏览器:<a>超小屏(<768px)、小屏(>=768px)和中屏(>=992px)和大屏(>=1200px)</a>。而内层.container容器的自适应宽度为:<a>自动、750px、970px和1170px</a>。自动的意思为,如果你是手机屏幕,则全面独占一行显示。</p>
<pre>//四种屏幕分类全部激活
<div class=”container”>
<div class=”row”>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
<div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12 a”>4</div>
</div>
</div></pre>
<p><h5>例子</h5></p>

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta  charset="utf-8">  
  5.         <title>Bootstrap Learning</title>  
  6.         <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">  
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  8.           
  9.         <!--[if lt IE 9]>  
  10.         <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>  
  11.         <![endif]-->  
  12.           
  13.     </head>  
  14.   
  15.     <body>  
  16.         <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>  
  17.         <script src="../bootstrap/js/bootstrap.min.js"></script>  
  18.     </body>  
  19. </html>  

        <div >右边内容</div>

Paste_Image.png

栅格系统示例

      </div>

<p>(col-lg-3)</p>

[html] view plaincopy

    </div>

Paste_Image.png

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta  charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.         <title>Bootstrap 布局</title>  
  7.         <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">  
  8.           
  9.         <!--[if lt IE 9]>  
  10.         <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>  
  11.         <![endif]-->  
  12.           
  13.     </head>  
  14.   
  15.     <body>  
  16.         <h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>  
  17.         <p>Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。</p>  
  18.           
  19.         <h2 class="page-header">区块一</h2>  
  20.         <p>对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>  
  21.   
  22.         <h2 class="page-header">区块二</h2>  
  23.         <p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。</p>  
  24.   
  25.         <h2 class="page-header">区块三</h2>  
  26.         <p>在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>  
  27.   
  28.         <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>  
  29.         <script src="../bootstrap/js/bootstrap.min.js"></script>  
  30.     </body>  
  31. </html>  

    Bootstrap3 不再提供非响应式的固定布局,如需禁用响应式布局,如下:

<p>(col-md-4)</p>

效果:

      不要添加 viewport<meta>

Paste_Image.png

澳门金莎娱乐 7

      通过.container 设置一个width值从而覆盖框架的默认width设置,如 width :970px !important;

<p>(col-sm-6)</p>

让页面居中显示:

      如果使用了导航条,需要移除所有导航条的折叠和展开行为

Paste_Image.png

加入div container 类 <div class="container">,刷新页面即可:

      对于栅格布局,额外增加.col-xs-* class 或替换掉 .col-md-*  和 .col-lg-* 。针对超小屏幕设备的

<p>(col-xs-12)</p>

[html] view plaincopy

      栅格系统能够在所有分辨率的环境下展开。

Paste_Image.png

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta  charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.         <title>Bootstrap 布局</title>  
  7.         <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">  
  8.           
  9.         <!--[if lt IE 9]>  
  10.         <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>  
  11.         <![endif]-->  
  12.           
  13.     </head>  
  14.   
  15.     <body>  
  16.         <div class="container">  
  17.         <h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>  
  18.         <p>Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。</p>  
  19.           
  20.         <h2 class="page-header">区块一</h2>  
  21.         <p>对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>  
  22.   
  23.         <h2 class="page-header">区块二</h2>  
  24.         <p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。</p>  
  25.   
  26.         <h2 class="page-header">区块三</h2>  
  27.         <p>在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>  
  28.         </div>  
  29.         <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>  
  30.         <script src="../bootstrap/js/bootstrap.min.js"></script>  
  31.     </body>  
  32. </html>  

  5.2 设置偏移量

<pre>//有时我们可以设置列偏移,让中间保持空隙
<div class=”container”>
<div class=”row”>
<div class=”col-md-8 a”>8</div>
<div class=”col-md-3 col-md-offset-1 a”>3</div>
</div>
</div></pre>
<p><h5>例子</h5></p>

效果图:

    类似margin-left的偏移操作用offset类的固定值代替,

Paste_Image.png

澳门金莎娱乐 8

    如:<div >..</div>

<p>引入bootstrap样式前</p>

使用栅格系统:

  5.3 流式布局的栅格系统

Paste_Image.png

三个区块,平均分成三栏,所以每栏占四个风格的宽度。

    将最外层的.row 替换为 .row-fluid类

<p>引入bootstrap样式后</p>

在布局容器上,添加相应的网格的类。

    如:<div ></div>

Paste_Image.png

对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

  1. Bootstrap3 的响应式布局案例  

<pre>//也可以嵌套,嵌满也是12列
<div class=”container”>
<div class=”row”>
<div class=”col-md-9 a”>
<div class=”col-md-8 a”>1-8</div>
<div class=”col-md-4 a”>9-12</div>
</div>
<div class=”col-md-3 a”>11-12</div>
</div>
</div></pre>
<p><h5>例子</h5></p>

效果图:

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src=";
    <script src=";
    <link rel="stylesheet">
  </head>
  <body >
    <div >
      <h1 >Custom heading</h1>
      <div >
        <div >
          <h1>体育新闻</h1>
          <h1>娱乐新闻</h1>
          <h1>经济新闻</h1>
        </div>
        <div >
          <h2>百度拟用全景技术还原尼泊尔古迹</h2>
            <p >4月29日,百度宣布即日起发起一项照片征集活动,将借助该公司创新的“全景照片            游”技术,在网上虚拟还原出此前尼泊尔地震中被毁古迹的原貌。</p>
            <p>在4月25日尼泊尔突发的里氏8.1级地震中,位于加德满都等地的多处世界文化遗产古建筑群遭到            了严重损毁,包括1832年受女王之命修建的九层达拉哈拉塔,外观酷似海螺的寺庙建筑巴德岗杜巴广            场,以及世界最大的圆佛塔博达哈大佛塔等......</p>
        </div>
      </div>
    </div>
  </body>

Paste_Image.png

澳门金莎娱乐 9

  在窗口大于1200px(col-lg-4)时,左侧边栏占据4列宽,右侧占据8列宽

<p>引入bootstrap样式前</p>

========================================================

  992px---1200px(col-md-5)时,左侧边栏占据5列宽,右侧占据7列宽

Paste_Image.png

嵌套:

  768px---992px(col-sm-3) 时, 左侧边栏占据3列宽,右侧占据9列宽

<p>引入bootstrap样式后</p>

在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。

  小于768px时(col-xs-12),    左右都占据100%,堆叠

Paste_Image.png

[html] view plaincopy


<pre>//可以把两个列交换位置,push向左移动,pull向右移动
<div class=”container”>
<div class=”row”>
<div class=”col-md-9 col-md-push-3 a”>9</div>
<div class=”col-md-3 col-md-pull-9 a”>3</div>
</div>
</div></pre>

  1. <!DOCTYPE html>  
  2. <html>      
  3.   <head>          
  4.     <meta  charset="utf-8">          
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">          
  6.     <title>Bootstrap 布局  
  7.     </title>          
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">                   
  9.     <!--[if lt IE 9]>  
  10.             <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>  
  11.             <![endif]-->                
  12.   </head>      
  13.   <body>          
  14.     <div class="container">          
  15.       <h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>          
  16.       <p>Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。  
  17.       </p>          
  18.       <div class="row">              
  19.         <div class="span4">          
  20.           <h2 class="page-header">区块一</h2>          
  21.           <p>对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。  
  22.           </p>              
  23.         </div>              
  24.         <div class="span4">          
  25.           <h2 class="page-header">区块二</h2>          
  26.           <p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。  
  27.           </p>              
  28.         </div>                           
  29.         <div class="span4">          
  30.           <h2 class="page-header">区块三</h2>          
  31.           <p>在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。  
  32.           </p>   
  33.           <div class="row">  
  34.             <div class="span2">  
  35.             在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。  
  36.             </div>   
  37.             <div class="span2">  
  38.             在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。  
  39.             </div>  
  40.           </div>            
  41.         </div>          
  42.       </div>          
  43.     </div>          
  44. <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>          
  45. <script src="../bootstrap/js/bootstrap.min.js"></script>      
  46.   </body>  
  47. </html>  

<p><h5>例子</h5></p>

效果图:

Paste_Image.png

澳门金莎娱乐 10

引入bootstrap样式前

流式栅格系统案例
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。

Paste_Image.png

将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变,这样能方便的在流式与固定栅格之间切换。

引入bootstrap样式后

代码:

Paste_Image.png

澳门金莎娱乐 11

效果图片:(任意缩小、放大浏览器页面,就可以看到“流动”效果了)

澳门金莎娱乐 12

注意:

流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。

动手做:

将区块三中的两个 .span2 改为 span6,再查看效果,是不是现在比较整齐均匀了呢?

=============响应式=======================================

Media queries允许在一些条件基础上自定义CSS 

@media (max-width: 767px) {}
上面代码的意思是:当浏览器窗口小于767px时,就应用 {} 里的样式

代码:居然不引入(link href="")也可以使用啊

[html] view plaincopy

  1. <!DOCTYPE html>  
  2. <html>      
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>  
  7.     Media queries允许在一些条件基础上自定义CSS   
  8.     </title>  
  9.         <!--<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> -->  
  10.     <style>  
  11.     body{background:#000;}  
  12.       
  13.     @media(max-width:767px) {body{background:#f00;}}  
  14.     </style>  
  15.   </head>  
  16.   <body>      
  17.     <!-- <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> -->          
  18.     <!-- <script src="../bootstrap/js/bootstrap.min.js"></script>  -->  
  19.   </body>  
  20. </html>  

缩小放大浏览器窗口,就可以看到效果了。

[plain] view plaincopy

  1. /* 大屏幕 */  
  2. @media (min-width: 1200px) { ... }  
  3.    
  4. /* 平板电脑和小屏电脑之间的分辨率 */  
  5. @media (min-width: 768px) and (max-width: 979px) { ... }  
  6. 澳门金莎娱乐,   
  7. /* 横向放置的手机和竖向放置的平板之间的分辨率 */  
  8. @media (max-width: 767px) { ... }  
  9.    
  10. /* 横向放置的手机及分辨率更小的设备 */  
  11. @media (max-width: 480px) { ... }  

启用响应式特性
通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。

[html] view plaincopy

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">  

例子:

[html] view plaincopy

  1. <head>          
  2.   <meta  charset="utf-8">          
  3.   <meta name="viewport" content="width=device-width, initial-scale=1.0">          
  4.   <title>Bootstrap 布局  
  5.   </title>          
  6.   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">     
  7.   <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">                
  8.   <!--[if lt IE 9]>  
  9.           <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>  
  10.   <![endif]-->                
  11. </head>    

响应式布局辅助class
为了更快的针对移动设备做开发, 下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表, 以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。

澳门金莎娱乐 13

参考:

官方文档

中文文档:

版权声明:本文为博主原创文章,未经博主允许不得转载。


版权声明:本文由澳门金莎娱乐发布于关于澳门金莎,转载请注明出处:①bootstrap学习笔记一下载安装,栅格系统