关于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 阅读(1921) 评论(0) 编辑收藏举报

heartflower

关于bootstrap的基本架构

公告