Bootstrap 的基本使用

一、Bootstrap简介

Bootstrap 是目前受欢迎的前端框架之一，是基于HTML，CSS，JavaScript的，它简洁灵活，使web开发更加快捷

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐：https://v3.bootcss.com/
在这里插入图片描述

1.优点

在这里插入图片描述

2. 版本

在这里插入图片描述

二、 Bootstrap 使用

控制权在框架本身，使用者要安装框架所规定的某种规范进行开发
Bootstrap 使用四部曲：

2.1 创建文件夹结构

在这里插入图片描述

2.2 创建html骨架结构

在这里插入图片描述

2.3 引入相关样式文件

在这里插入图片描述

2.4 书写内容

三、Bootstrap 布局容器

在这里插入图片描述

四、Bootstrap 栅格系统

4.1 栅格系统简介

在这里插入图片描述

注意：
rem 是把整个屏幕划分为若干等份
而栅格系统是把页面内容划分为若干等宽的列

不同屏幕下container一定会进行一个缩放的效果，这时候把container划分为12等份，如果是在大屏幕下，每列的宽就会变宽了，那么内容就会相对大一些，如果container变小了，每列的宽度也会跟着变小了，页面的内容就会发生相应的缩放，就会实现缩放的效果

总结：在BootStrap中，是把整个大的容器 container划分为12等份，container宽度不同，那么每一列的宽度也会不同，页面的内容也会随着宽度的变化而发生缩放的效果

4.2 栅格选项参数

在这里插入图片描述

4.3 栅格系统的基本使用

基本使用（一）

栗子：

<body>
    <div class="container">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
    </div>
</body>

在这里插入图片描述

我们发现，这些 div 并没有平均分成 4 等份，想要实现列的平均划分，需要添加类前缀
我们当前是在大屏幕下，所以类前缀是 .col-lg
4个盒子平均占满12等份，每个盒子占3份

  1. 如果子元素的 份数相加等于12，那么子元素就能占满整个 container 的宽度

栗子：

<style>
    [class^=col]{
        border: 2px solid pink;
    }
</style>
 <div class="container">
       <div class="col-lg-3">1</div>
       <div class="col-lg-3">2</div>
       <div class="col-lg-3">3</div>
       <div class="col-lg-3">4</div>
    </div>

在这里插入图片描述

栗子2：

  <div class="container">
       <div class="col-lg-6">1</div>
       <div class="col-lg-2">2</div>
       <div class="col-lg-2">3</div>
       <div class="col-lg-2">4</div>
    </div>

在这里插入图片描述

  1. 如果孩子的份数相加 小于12，那么就占不满整个宽度
 <div class="container">
       <div class="col-lg-6">1</div>
       <div class="col-lg-2">2</div>
       <div class="col-lg-2">3</div>
       <div class="col-lg-1">4</div>
    </div>

在这里插入图片描述
3. 如果孩子的份数相加 大于12 ，多余的那一列会另起一行来显示

   <div class="container">
       <div class="col-lg-6">1</div>
       <div class="col-lg-2">2</div>
       <div class="col-lg-2">3</div>
       <div class="col-lg-3">4</div>
    </div>

在这里插入图片描述

基本使用（二）

栗子1： 在中等屏幕下，让孩子各占 4份

    <div class="container">
       <div class="col-lg-3 col-md-4">1</div>
       <div class="col-lg-3 col-md-4">2</div>
       <div class="col-lg-3 col-md-4">3</div>
       <div class="col-lg-3 col-md-4">4</div>
    </div>

在这里插入图片描述
栗子2： 在小屏幕下，让孩子占6份

   <div class="container">
       <div class="col-lg-3 col-md-4 col-sm-6">1</div>
       <div class="col-lg-3 col-md-4 col-sm-6">2</div>
       <div class="col-lg-3 col-md-4 col-sm-6">3</div>
       <div class="col-lg-3 col-md-4 col-sm-6">4</div>
    </div>

在这里插入图片描述
栗子3：在超小屏幕下，每个孩子占 12 份

  <div class="container">
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    </div>

在这里插入图片描述

4.4 栅格系统的列嵌套

在这里插入图片描述
栗子：

<style>
    .container>div{
        height: 50px;
         background-color: pink;

    }
     .row>div {
            height: 50px;
            background-color: pink;
            /* margin: 0 10px; */
     }     
</style>
<body>
    <div class="container">
        <div class="col-md-4">
            <div class="row">
              <div class="col-md-6">a</div>
              <div class="col-md-6">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</body>

在这里插入图片描述

4.5 栅格系统的列偏移

在这里插入图片描述
栗子1： 两个盒子贴边

<style>
    .container div {
        height: 50px;
        background-color: pink;
    }
</style>
<body>
    <div class="container">
        <div class="col-md-3">左侧</div>
         <!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
        <div class="col-md-3 col-md-offset-6">右侧</div>
    </div> 
</body>

在这里插入图片描述

栗子2： 盒子水平居中

<div class="container">
       <!-- 如果只有一个盒子 那么就偏移  = (12 - 6) /2 = 6 -->
        <div class="col-md-6 col-md-offset-3">中间</div>
    </div>

在这里插入图片描述

4.6 栅格系统列排序

在这里插入图片描述
栗子： 左侧右侧交换
没有排序之前：

 <div class="container">
        <div class="col-md-4">左侧</div>
        <div class="col-md-8">右侧</div>
    </div>

在这里插入图片描述

排序之后：

 <div class="container">
        <div class="col-md-4 col-md-push-8">左侧111</div>
        <div class="col-md-8 col-md-pull-4">右侧222</div>
 </div>

在这里插入图片描述

4.7 响应式工具

在这里插入图片描述
栗子：隐藏

<style>
    .row div {
            height: 300px;
            background-color: purple;
            color: red;
            font-size: 20px;
        }
   .row div:nth-child(3) {
            background-color: pink;
            color: red;
            font-size: 20px;
        }
        
</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md">我可是会隐藏的哦！！！</div>
            <div class="col-xs-3">4</div>
        </div> 
    </div>
</body>

只在中等屏幕下隐藏，其他屏幕下不会隐藏
在这里插入图片描述

栗子：显示

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3">3</div>
            <div class="col-xs-3">4</div>
        </div> 
    </div>
</body>

span的文字只有在大屏才显示，其他屏幕下不显示
在这里插入图片描述


__EOF__

本文作者：杨芋可可
本文链接：https://www.cnblogs.com/yangyukeke/p/14130757.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   杨芋可可  阅读(465)  评论(1)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示