关于bootstrap的基本架构

时间 2019-11-08

标签关于 bootstrap 基本架构栏目 Bootstarp 繁體版

原文原文链接

1、bootstrap 的使用css

　　1.下载bootstrapjquery

　　　　能够从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个连接时，您将看到以下所示的网页web

会看到两个按钮：bootstrap

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

　　2.使用bootstrap浏览器

　　　　使用bootstrap的时候，只须要导入bootstrap的文件就好了，有两种方法导入布局

　　　　1.本地安装测试

　　　　　　用<link>标签调用css样式字体

　　　　2.在线安装ui

<!-- 新 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>

2、响应式设计spa

　　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{
                    ...
                    ...
                }
            }

3、栅格系统

　　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>