bootstrap学习笔记01-栅格系统

素颜马尾好姑娘i 2024-04-19 08:35 6阅读 0赞

一、bootstrap的安装

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70][]

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

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

<link rel="stylesheet" href="bs/css/bootstrap.css">
        
        <script src="bs/js/jquery-1.12.4.js"></script>
        
        <script src="bs/js/bootstrap.js"></script>

二、布局容器

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 2][]

三、栅格系统

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

栅格系统的工作原理：

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">
        
        <link rel="stylesheet" href="bs/css/bootstrap.css">
        
        <script src="bs/js/jquery-1.12.4.js"></script>
        
        <script src="bs/js/bootstrap.js"></script>
        
        <script src="bs/js/holder.js"></script>
        <style>
            .row{
                margin-bottom: 15px;
            }
        </style>
    
    </head>
    <body>
    
    <div class="container">
        <h1>bootstrap前端框架</h1>
        
        <div class="row">
            
            <div class="col-md-8">
                <img src="holder.js/100px200" alt="">
            </div>
            
            <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>
        
        <div class="row">
            
            <div class="col-md-4 col-md-offset-8">
                
                <img src="holder.js/100px200" alt="">
            </div>
        </div>
    </div>

页面实现效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 3][]

[bootstrap]: https://v3.bootcss.com/getting-started/#download
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7af7a3649f834807b2c53c71dc672862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5f0a78f0789040ae976090748dea7086.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/83065e803c9342e2852350cf5f50c5c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/442a5a7509a74eb7b87b0cd82f2d6c8c.png