计算机教程

【必赢娱乐棋牌】Bootstrap 中文文档教程

6 7月 , 2019  

Bootstrap 中文文档教程

Bootstrap 中文文档教程

全局样式和grid布局—Bootstrap中文使用指南

全局样式1.要求html5文档类型

Bootstrap使用的css属性和html元素依赖于html5的文档类型声明,请确保每个Bootstrap的页面包含下面的代码:

  1. <!DOCTYPE html>

  2. <html>

  3.   …

  4. </html>

2.排版和链接样式

全局的排版和链接样式放在scaffolding.less文件内(关于less教程后面会有详细说明)。默认做了如下处理:

  • 移除body的外边距

  • 设置body的背景颜色为白色

  • 使用@baseFone,@baseFontSize,@baseLineHeight属性作为排版基础

  • 使用@linkColor设置了全局链接颜色和:hover伪属性的下划线

3.默认样式重置

从 Bootstrap
2开始,CSS重置样式基于Normalize.css,新的重置样式,可以在reset.less中找到(Bootstrap做了许多的简化)。

默认栅格布局系统

Bootstrap的默认布局系统由总宽度为940px的12列组成。
它能够适应各个分辨率的显示设备,比如手机、平板、超高分辨率屏幕等。
(ps:请看demo)

<div >

  <div >…</div>

  <div >…</div>

</div>

上面的代码将创建二列栅格,span4容器占总宽度的4/12即(1/3)。

1.如何处理列的偏移

比如我们希望有个栅格是右靠齐。

<div >

  <div >…</div>

  <div >…</div>

</div>

第二个span4容器,增加个offset4样式名,表示跟前一个容器相隔4个列距离。

2.处理列的嵌套

(ps:请看demo)
在Bootstrap中使用静态(非浮动)的布局处理栅格的嵌套是非常简单的事。

<div >

  <div >

    Level 1 of column

    <div >

      <div >Level 2</div>

      <div >Level 2</div>

    </div>

  </div>

</div>

.row的容器内部是一个占满12列的层(.span12),下面嵌套个新的.row容器,内部是span6二列布局。

浮动布局系统

浮动布局系统,就是我们经常使用的float:left;布局方式,比较特殊的是bootstrap使用百分比来定义栅格的宽度。

1.浮动栅格的行容器

(ps:请看demo)

<div >

  <div >…</div>

  <div >…</div>

</div>

流动布局,行容器使用. row-fluid 样式名,其他地方不变。

.row-fluid {

    width: 100%;

}

.row-fluid:before, .row-fluid:after {

    content: “”;

    display: table;

}

.row-fluid:after {

    clear: both;

}

2.宽度使用百分比,而不是像素值

浮动布局系统比静态布局系统,拥有更强的适应性,同样适应不同分辨率的屏幕。

.row-fluid > [class*=”span”] {

    float: left;

    margin-left: 2.5641%;

}

.row-fluid > [class*=”span”]:first-child {

    margin-left: 0;

}    

3.浮动布局中处理容器的嵌套

(ps:请看demo)
浮动布局中的嵌套处理有点不大一样:嵌套的栅格不需要匹配父容器的栅格数,每一行的宽度都占用父容器的100%宽度。

<div >

  <div >

  Level 1 of column

    <div >

      <div >Level 2</div>

      <div >Level 2</div>

    </div>

  </div>

</div>

定制栅格

变量

默认值

描述

@gridColumns

12列的数量

@gridColumnWidth

60px列的宽度

@gridGutterWidth

20px列的间隔LESS中的变量

Bootstrap中定制一套自己的940px栅格系统,只需要很少的less变量。这些变量可以在variables.less中找到。

如何定制

你需要修改@grid*三个变量(指的是上面表格中的三个变量),并重新编译Bootstrap(less重新编译出新的css文件)。关于less的编译可以看 four
ways documented to
recompile,如果新增了列,务必在grid.less增加上对应的样式。

保留适应性

自适应的栅格系统只能用于默认的940px栅格。为了维持Bootstrap的自适应性,需要额外在 responsive.less中自定义栅格样式。

布局静态布局

<div >

   …

 </div>

浮动布局

使用container-fluid样式名,产生浮动页面结构,下面的demo中演示了生成常用的2列布局。

<div >

  <div >

    <div >

      <!–Sidebar content–>

    </div>

    <div >

      <!–Body content–>

    </div>

  </div>

</div>

效果如下图:

自适应设计

 

如何让栅格布局系统适应不同分辨率的屏幕?

需要用到css3的media queries,严重推荐阅读《CSS3 media
queries使用参考指南》和《CSS3 Media Queries 详解》。Media
Queries的引用,让你可以针对不同的设备定制不一样的css样式,可以很方便的让布局系统适应不同的媒体设备。
原文讲得比较晦涩,明河借用《CSS3 Media Queries 详解》举个简单例子:

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:
400px)”>

样式表引用增加media属性。

  • screen: 媒体类型里的一种,10种媒体类型

  • and
    被称为关键字,其他关键字还包括
    not(排除某种设备),only(限定某种设备)

  • (min-width: 400px)
    就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media
    features部分

screen and (min-width:
400px)
的意思是当屏幕的宽度大于等于400px的时候,应用此条CSS,也就是说media非常像条件语句

bootstrap支持的设备

Label

Layout width

Column width

Gutter width

智能手机等于小于480px无固定宽度无固定宽度介于智能手机和平板电脑之间等于小于767px无固定宽度无固定宽度平板电脑等于大于768px42px20px默认等于大于980px60px20px超分辨率等于大于1200px70px30px需要meta标签

<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

使用media queries

Bootstrap默认不包含这些media queries的样式,你可以通过下列的方式引入:

  • 页面引入bootstrap-responsive.min.css 和respond.min.js

  • 重编译bootstrap时,增加@import “responsive.less”

  • 修改和单独编译responsive.less为一个独立的文件

Bootstrap 的media queries代码

// Landscape phones and down

 @media (max-width: 480px) { … }

 

 // Landscape phone to portrait tablet

 @media (max-width: 767px) { … }

 

 // Portrait tablet to landscape and desktop

 @media (min-width: 768px) and (max-width: 979px) { … }

 

 // Large desktop

 @media (min-width: 1200px) { … }

 

 

学习地址:

http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html

 


bootstrap 是什么:

bootstrap:User Interface Framework用户页面架构

必赢娱乐棋牌 1

让页面居中显示:

官网下载:http://twitter.github.io/bootstrap/  点击打开链接

[html] view plaincopy

  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  

必赢娱乐棋牌 2

必赢娱乐棋牌 3

[html] view plaincopy

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

[plain] view plaincopy

效果图:

[plain] view plaincopy

必赢娱乐棋牌 4

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

必赢娱乐棋牌 5

  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>  

解压:

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

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

使用栅格系统:

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

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

效果:

参考:

下载jquery:

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

嵌套:

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

[html] view plaincopy

动手做:

地址: http://code.jquery.com/jquery-1.7.2.min.js 点击打开链接

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

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

必赢娱乐棋牌 6

必赢娱乐棋牌 7

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

  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>  

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

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


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图