关于bootstrap的基本架构

一、bootstrap 的使用

  1.下载bootstrap

    可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页

    

  

会看到两个按钮:

  • Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
  • Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

  2.使用bootstrap

    使用bootstrap的时候,只需要导入bootstrap的文件就行了,有两种方法导入

    1.本地安装

      用<link>标签调用css样式

    2.在线安装

    

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

二、响应式设计

  1.认识响应式设计

    响应式设计可以使网页适应于不同的设备,在现阶段,响应式web设计的实现途径包括:弹性网格、液态布局、使用css media query技术等。

  2.设计流程

    1.确定需要兼容的设备类型,屏幕尺寸

    2.制作线框原型并进行测试

    3.视觉设计

    4.脚本实现

  3.设计响应式布局结构

    因为网页会根据屏幕宽度自动调整布局,所以,不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。

    1. 设置 Meta 标签

      大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

    2.通过媒介查询来设置样式media queries

      media queries是响应式设计的核心,若要定义一个屏幕的宽度范围以及自定义类样式,可以这样写:

      

@media  screen and (min-width: 100px) and (max-width: 640px) {
                .Myclass{
                    ...
                    ...
                }
            }

三、栅格系统

  1.栅格系统工作原理

    1.row(行)必须包含在.container中,以便为其赋予合适的排列和内补

    2.使用row在水平方向创建一组列(列宽总个数应为12个)

    3.网页内容要放在列内,只有列能作为行的直接子元素。下面的代码就是不合理的

    

<div class="row">
                <h1>固定布局</h1>
                <div class="col-md-4">列宽4个</div>
                <div class="col-md-8">列宽8格</div>
            </div>

 

    4.可以通过padding创建列之间的间隔

    

.col-1{
                padding-left: 15px;
                padding-right: 15px;
            }

    5.栅格系统的列是通过制定1到12的值来指定范围的,比如

    

<div class="row">
                <div class="col-md-4">列宽4个</div>
                <div class="col-md-8">列宽8格</div>
            </div>

  2.固定栅格与流式栅格

    使用.container 和 .container-fluid分别设计

    

<h1>固定布局</h1>
        <div class="container" >
            <div class="row">
                <div class="col-md-4">列宽4个</div>
                <div class="col-md-8">列宽8格</div>
            </div>
        </div>
        <h1>流式布局</h1>
        <div class="container-fluid" >
            <div class="row">
                <div class="col-md-4">4个</div>
                <div class="col-md-8">8格</div>
            </div>
        </div>

效果如下:

  

 

 

 3.列的基本操作

   1.列偏移

    使用offset系列类实现该功能

<div class="row">
                <div class="col-md-4">列宽4个</div>
                <div class="col-md-6 col-md-offset-2">列宽6格 偏移2格</div>
        </div>
        <div class="row">
                <div class="col-md-4 col-md-offset-4">列宽4个  偏移4格</div>    
            </div>

  2.列排序

    列排序通过push 和 pull 两个类实现,push向右偏移,pull表示向左偏移

    

<div class="row">
                <div class="col-md-4 col-md-push-8">左列,显示在右侧</div>
                <div class="col-md-6 col-md-pull-4">中间,在左侧</div>
                <div class="col-md-2 col-md-pull-4">右列,在中间</div>
        </div>

 

  

posted @ 2019-05-19 11:40  heartflower  阅读(1810)  评论(0编辑  收藏  举报