BootStrap响应式页面

BootStrap:

Web前端CSS框架;

BootStrap是基于HTML,CSS,JavaScript的.

由它设计页面可以在手机,pad,pc都可以按照预定义好的不同样式直接访问.

准备工作:

　　1.下载BootStrap;

　　2.将BootStrap中的文件夹(css&fonts&js)导入项目中;

　　3.在网页中引入文件:

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap.min.css文件路径" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery.min.js文件路径"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap.min.js文件路径"></script>
</head>

页面布局:

BootStrap的全局CSS

　　1.布局容器:

　　　　container类用于固定宽度并支持响应式布局的容器;　　eg: <div class="container"></div>

　　　　container-fluid类用于100%宽度,占据全部视口的容器;

扫描二维码关注公众号，回复： 73679 查看本文章

　　2.栅格系统:

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的minxin用于生成更具语义的布局.

　　　　使用.row样式定义栅格的行. <div class="row"></div>

　　　　定义列:(下图)

小小Demo

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>My Bootstrap 响应式页面</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-xs-6">
                </div>
                <div class="col-md-4 col-xs-6"">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </body>
</html>

BootStrap响应式页面

BootStrap:

准备工作:

页面布局:

小小Demo

猜你喜欢