①bootstrap学习笔记一下载安装，栅格，流式，布局，样式

发布时间：2020-12-17 21:15:41 所属栏目：安全来源：网络整理

导读：bootstrap：User?Interface Framework用户页面架构 bootstrap?是什么： Sleek,intuitive,and powerful front-end framework for faster and easier web development. ?点击打开链接? 英文简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。?点击打开

bootstrap：User?Interface Framework用户页面架构

bootstrap?是什么：

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

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

打开官网，查看各个导航栏中的内容：

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

解压：

文件结构：

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

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

responsive 为响应式

下载jquery:

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

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

下载 html5shiv文件，解压到相应目录：

编写第一个 start.html文件：

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

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8">
        <title>Bootstrap Learning</title>
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        
        <!--[if lt IE 9]>
        <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
        <![endif]-->
        
    </head>

    <body>
        <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

栅格系统示例

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Bootstrap 布局</title>
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        
        <!--[if lt IE 9]>
        <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
        <![endif]-->
        
    </head>

    <body>
        <h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
        <p>Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。</p>
        
        <h2 class="page-header">区块一</h2>
        <p>对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>

        <h2 class="page-header">区块二</h2>
        <p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。</p>

        <h2 class="page-header">区块三</h2>
        <p>在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>

        <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

效果：

让页面居中显示：

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

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Bootstrap 布局</title>
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        
        <!--[if lt IE 9]>
        <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
        <![endif]-->
        
    </head>

    <body>
        <div class="container">
        <h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
        <p>Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。</p>
        
        <h2 class="page-header">区块一</h2>
        <p>对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>

        <h2 class="page-header">区块二</h2>
        <p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。</p>

        <h2 class="page-header">区块三</h2>
        <p>在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>
        </div>
        <script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

效果图：

使用栅格系统：

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

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

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

效果图：

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

嵌套：

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

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

效果图：

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

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

代码：

效果图片：（任意缩小、放大浏览器页面，就可以看到“流动”效果了）

注意：

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

动手做：

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

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

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

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

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

<!DOCTYPE html>
<html>    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>
    Media queries允许在一些条件基础上自定义CSS 
    </title>
        <!--<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> -->
    <style>
    body{background:#000;}
    
    @media(max-width:767px) {body{background:#f00;}}
    </style>
  </head>
  <body>    
    <!-- <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> -->        
    <!-- <script src="../bootstrap/js/bootstrap.min.js"></script>  -->
  </body>
</html>

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

/* 大屏幕 */
@media (min-width: 1200px) { ... }
 
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

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

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

例子：

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

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

参考：

官方文档

中文文档：http://www.bootcss.com/scaffolding.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!