bootstrap学习笔记01-栅格系统

最新推荐文章于 2022-04-25 13:21:03 发布

weeds606

最新推荐文章于 2022-04-25 13:21:03 发布

阅读量232

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100876524

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

一、bootstrap的安装

1.在bootstrap官网下载安装包bootstrap官网。

2.解压安装包，解压后将jQuery的包放在js目录下。注意：jQuery的包需要另外下载

3.在HTML代码中引用第三方包

    <!--引入bootstrap的css样式-->
    <link rel="stylesheet" href="bs/css/bootstrap.css">
    <!--引入jQuery-->
    <script src="bs/js/jquery-1.12.4.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="bs/js/bootstrap.js"></script>

二、布局容器

bootstrap的网页内容和栅格系统需要包裹在一个容器内。bootstrap有两个布局容器：

.container：用于固定宽度并支持响应式布局的容器。实现效果如下图，距离浏览器左右边框都留有间距

.container-fluid：用于 100% 宽度，占据全部视口（viewport）的容器。距离浏览器左右边框无间距

三、栅格系统

栅格系统是通过一系列的行与列的组合来创建页面布局，网页的内容可以放在这些布局中。

栅格系统的工作原理：

1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。

2.内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

3.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

4.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入bootstrap的css样式-->
    <link rel="stylesheet" href="bs/css/bootstrap.css">
    <!--引入jQuery-->
    <script src="bs/js/jquery-1.12.4.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="bs/js/bootstrap.js"></script>
    <!--引入holder.js文件，该文件用于生成占位图片-->
    <script src="bs/js/holder.js"></script>
    <style>
        .row{
            margin-bottom: 15px;
        }
    </style>

</head>
<body>
<!--定义布局容器-->
<div class="container">
    <h1>bootstrap前端框架</h1>
    <!--定义一行，bootstrap将一行分为12个单元-->
    <div class="row">
        <!--定义一列，并且该列占用8个单元-->
        <div class="col-md-8">
            <img src="holder.js/100px200" alt="">
        </div>
        <!--定义一列，该列占用4个单元-->
        <div class="col-md-4">
            <!--定义占位图片-->
            <img src="holder.js/100px200" alt="">
        </div>
    </div>
</div>
</body>
</html>

列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。代码示例

<div class="container">
    <h1>bootstrap前端框架</h1>
    <!--定义一行，bootstrap将一行分为12个单元-->
    <div class="row">
        <!--col-md-offset-8向右偏移8个单元-->
        <div class="col-md-4 col-md-offset-8">
            <!--定义占位图片-->
            <img src="holder.js/100px200" alt="">
        </div>
    </div>
</div>

页面实现效果如下：

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习笔记01-栅格系统

一、bootstrap的安装1.在bootstrap官网下载安装包bootstrap官网。2.解压安装包，解压后将jQuery的包放在js目录下。注意：jQuery的包需要另外下载3.在HTML代码中引用第三方包  <link rel="stylesheet" href="bs/css/boots...
复制链接

扫一扫

专栏目录