bootstrap花里胡哨部分笔记

本文主要介绍了Bootstrap的网格系统,包括container的区别、列的使用、对齐方式、边距和阴影等。在网格系统中,重点讲解了V4的新特性,如直接使用col-n和col的灵活布局,以及对齐方式的实现。此外,还涵盖了文本处理、图片样式、表格样式、边框调整和定位等基础知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于组件部分官方整理的非常好,在这里不再整理
https://v4.bootcss.com/docs/4.0/components/alerts/

1.网格系统

v3:

https://v3.bootcss.com/css/#grid

v4:

https://v4.bootcss.com/docs/4.0/layout/grid/

container和container-fluid(v3,v4相同)

  • container两边有一定的margin
  • container-fluid占满横向全屏,无两侧margin
  • 行用row,列col
  • 一行共12份
 <div class="container">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;"></div>
        <div class="col-lg-4" style="background-color: red;"></div>
        <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>
  </div>
 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;"></div>
        <div class="col-lg-4" style="background-color: red;"></div>
        <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>
  </div>

container的不同之处

v3container由分成四段:

[外链图片转存失败(img-j3kkTVbK-1564649104361)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564411187395.png)]

v4container由分成五段:

在这里插入图片描述

V4中可直接使用class="col-n"和class=“col”

  • 在v3中只能使用col-md(lg,sm,xs)-n,实测显示在v3中使用class="col-n"和class=“col”,每个col分别占一行
  • 在v4中假设使用col-4,则3个col-4占一行
  • 在v4中假设使用col,则不管多少个,就算超出12份,所有的col都占一行,且均分

请看代码:(v4)

<container>
  <div class="row">
    <div class="col-4" style="background-color: red;"></div>
    <div class="col-4" style="background-color: blue;"></div>
    <div class="col-4" style="background-color: yellow;"></div>
    <div class="col-4" style="background-color: yellow;"></div>
    <div class="col-4" style="background-color: green;"></div>
    <div class="col-4" style="background-color: red;"></div>
  </div>
</container>

效果:

[外链图片转存失败(img-7GsuWYBS-1564649104368)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410881971.png)]

<container>
  <div class="row">
    <div class="col" style="background-color: red;"></div>
    <div class="col" style="background-color: blue;"></div>
    <div class="col" style="background-color: yellow;"></div>
    <div class="col" style="background-color: yellow;"></div>
    <div class="col" style="background-color: green;"></div>
    <div class="col" style="background-color: red;"></div>
  </div>
</container>

效果:

[外链图片转存失败(img-jG3KkkbQ-1564649104369)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410893487.png)]

  • 如果想要换行,可以加一个类 .w-100,意思是width:100%;
<container>
  <div class="row">
    <div class="col" style="background-color: red;"></div>
    <div class="col" style="background-color: blue;"></div>
    <div class="col" style="background-color: yellow;"></div>
    <div class="col" style="background-color: yellow;"></div>
    <div class="w-100" style="background-color: green;"></div>
    <div class="col" style="background-color: red;"></div>
  </div>
</container>

[外链图片转存失败(img-6opuX2RZ-1564649104370)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410904412.png)]

  • 根据内容多少改变列的宽度col-auto
  <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3" style="background-color: #09afff;"></div>
      <div class="col-lg-auto mr-auto" style="background-color: red;">1111111111111</div>
      <div class="col-lg-3" style="background-color: #09afff;"></div>
    </div>

[外链图片转存失败(img-i6FclZLA-1564649104371)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410916625.png)]

v4中的对齐方式(类似flex布局)

垂直对齐

  • 想让里面的列改变垂直对齐的方式,给父元素添加一个叫align-item-***的类
  • align-item-start(上对齐)align-item-center(中间对齐)align-item-end(下对齐)
  • 某列想要改变自己的对齐方式,align-self-***
  <div class="row align-items-end" style="height:100px;border:1px solid red;">
      <div class="col align-self-center" style="background-color: #09afff;"></div>
      <div class="col" style="background-color: red;"></div>
      <div class="col" style="background-color: #09afff;"></div>
    </div>

[外链图片转存失败(img-T45E90Jl-1564649104371)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410940223.png)]

水平对齐

  • 想让里面的列改变垂直对齐的方式,给父元素添加一个叫justify-content-***的类
  • justify-content-start(左对齐)justify-content-center(中间对齐)justify-content-end(右对齐)justify-content-around(每个元素两端均匀分布)justify-content-between(两端对齐,中间均匀分布)
 <div class="row justify-content-end" style="height:100px;border:1px solid red;">
      <div class="col-md-3" style="background-color: #09afff;"></div>
      <div class="col-md-3 " style="background-color: red;"></div>
      <div class="col-md-3" style="background-color: #09afff;"></div>
    </div>

[外链图片转存失败(img-ZAo2iX5v-1564649104372)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410952301.png)]

没有排水沟??

  • 给.row添加no-gutters,去除col两端默认的15px的padding
 <div class="row justify-content-end no-gutters" style="height:100px;border:1px solid red;">
      <div class="col-md-3" style="background-color: #09afff;"></div>
      <div class="col-md-3 " style="background-color: red;"></div>
      <div class="col-md-3" style="background-color: #09afff;"></div>
    </div>


排序

  • order-n(默认为0,数值越大,越靠右)
  • order-first放在最左
  • order-last放最右
<div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3" style="background-color: #1c7430;"></div>
      <div class="col-lg-auto order-1" style="background-color: red;">1111111111111</div>
      <div class="col-lg-3 order-first" style="background-color: #09afff;"></div>
    </div>

[外链图片转存失败(img-WvFpqnEL-1564649104372)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410967257.png)]

列偏移

v3:

  • col-md-push-n向右偏移
  • col-lg-pull-n向左偏移
  • 可以覆盖冲突的部分
  <div class="container">
    <div class="row">
      <div class="row align-items-end" style="height:100px;border:1px solid red;">
        <!--会覆盖-->
        <div class="col-lg-3 col-lg-push-1 align-self-center" style="background-color: #09afff;"></div>
        <div class="col-lg-3 col-lg-pull-1" style="background-color: red;"></div>
        <div class="col-lg-3" style="background-color: #09afff;"></div>
      </div>
    </div>
  </div>

[外链图片转存失败(img-zWHDThpQ-1564649104373)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410974962.png)]

v4:

  • offset-n向右偏移
  • mr-auto 加此类的元素右侧全部右靠齐
  • ml-auto 加此类的元素右侧全部左靠齐
    <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-3 mr-auto  offset-1" style="background-color: #1c7430;"></div>
      <div class="col-lg-auto" style="background-color: red;">1111111111111</div>
      <div class="col-lg-3" style="background-color: #09afff;"></div>
    </div>

[外链图片转存失败(img-C0douwaw-1564649104374)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410986337.png)]

嵌套(v4v3相同)

    <div class="row" style="height:100px;border:1px solid red;">
      <div class="col-lg-4" style="background-color: #1c7430;"></div>
      <div class="col-lg-4">
        <div class="row">
        <div class="col-lg-6" style="background-color: #09afff;"></div>
        <div class="col-lg-6" style="background-color: yellow;"></div>
      </div>
      </div>
      <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>

[外链图片转存失败(img-T5ggox83-1564649104374)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564410997936.png)]

2.bootstrap文本

<abbr>缩略语

 <abbr title="这是一个缩略语">email</abbr>

现实的样式:出现虚线下划线

文本转大小写

 <div class="container">
      <abbr title="这是一个缩略语">email</abbr>
      <br>
      <abbr title="这是一个缩略语" class="text-uppercase">email</abbr>
      <abbr title="这是一个缩略语" class="text-lowercase">EMAIL</abbr>
      <abbr title="这是一个缩略语" class="text-capitalize">email from li</abbr>
 </div>

运行结果:

[外链图片转存失败(img-qTKjyZEJ-1564649104375)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564358286334.png)]

<blockquote> 来源备注与引用

欲想达成下面的效果:

[外链图片转存失败(img-JH9jaT2l-1564649104376)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564358689290.png)]

 <blockquote class="blockquote">
         <p class="mb-0">对酒当个人生几何</p>
         <!-- p标签默认存在下边距,清除使用mb-0  =>  margin-buttom:0; -->
         <footer class="blockquote-footer">曹操<cite>《短歌行》</cite></footer>
 </blockquote>

列表

  • 清除前面的序号

     <ul class="list-unstyled">
                <li>111</li>
                <li>111</li>
                <li>111</li>
    </ul>
    
    
  • 嵌套情况

    <ul class="list-unstyled">
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <ul>
                    <li>2222</li>
                    <li>2222</li>
                    <li>2222</li>
                </ul>
    </ul>
    
    

    [外链图片转存失败(img-5QWhoPoT-1564649104376)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564360494937.png)]

  • 分行或单行显示

    • list-inline list-inline-item

       <ul class="list-inline">
                  <li class="list-inline-item">111</li>
                  <li class="list-inline-item">111</li>
                  <li class="list-inline-item">111</li>
      </ul>
      
      
    • float

      <ul class="list-unstyled clearfix">
                  <li class="float-left">222</li>
                  <li class="float-left">222</li>
                  <li class="float-left">222</li>
      </ul>
      
      

    效果对比:上为inline下位float

    [外链图片转存失败(img-L1JfWwjE-1564649104376)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564360788998.png)]

<kbd>键盘动作提示

使用kbd标签,表明这是一个键盘输入操作

  • 黑底白字,不知道有何用,花里胡哨
<kbd>Lorem</kbd> ipsum dolor, sit <kbd>amet</kbd> consectetur adipisicing elit. Commodi 

[外链图片转存失败(img-Q5tpHH02-1564649104376)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564361543645.png)]

3.boostrap图片

img-fluid

  • img-fluid等同于width:100%;
  • no-gutters 去除15px的padding 加在row上
<div class="container">
        <div class="row no-gutters">
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="w-100">
            </div>
        </div>
</div>

[外链图片转存失败(img-L7gZwtXf-1564649104377)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564362442635.png)]

img-thumbnail 缩略图

无非加点边框

<div class="container">
        <div class="row no-gutters">
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="w-100">
            </div>
            <div class="col-xl-4">
                <img src="./1.jpg" alt="" class="img-fluid img-thumbnail">
            </div>
        </div>
</div>

[外链图片转存失败(img-1a6jHhxo-1564649104377)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564362632285.png)]

rounded mx-auto

  • rounded 图片添加0.25rem的圆角
  • mx-auto => margin:0 auto;
 <div class="container">
        <img src="./1.jpg" alt="" class="mx-auto d-block w-25">
        <div class="text-center">
        <img src="./1.jpg" alt="" class="w-25 rounded">
        </div>
 </div>

效果为图片居中

picture

需求:大屏幕时显示1.jpg 中等屏幕显示2.jpg 其他屏幕显示3.jpg

 <picture>
            <source srcset="1.jpg" media="(min-width:992px)">
            <source srcset="2.jpg" media="(min-width:576px)">
            <img src="3.jpg" alt="">
</picture>

4.bootstrap 表格

https://v4.bootcss.com/docs/4.0/content/tables/

table相关样式

  • table 变为bootstrap表格
    [外链图片转存失败(img-5pZofjAV-1564649104377)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564364973513.png)]

  • table-dark 背景为黑色
    [外链图片转存失败(img-kJYRUUBu-1564649104378)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564364933304.png)]

  • table-danger 背景为红色

  • table-striped 添加斑马条纹
    [外链图片转存失败(img-qGcrmib5-1564649104378)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564364996499.png)]

  • table-bordered 表格添加外边框
    [外链图片转存失败(img-vdzAvZYi-1564649104379)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365018483.png)]

  • table-hover 鼠标经过本行高亮
    [外链图片转存失败(img-U1KF7Wc1-1564649104379)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365116928.png)]

  • table-sm 表格整体变小
    [外链图片转存失败(img-odgdxvyp-1564649104379)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365136332.png)]

caption

表格添加标题

 <table class="table table-sm ">
            <caption>表格标题</caption>
            <thead>

[外链图片转存失败(img-iIRiqwZY-1564649104380)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365237962.png)]

thead相关样式

  • thead-dark

    [外链图片转存失败(img-uEk1x56a-1564649104381)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365269859.png)]

  • thead-light
    [外链图片转存失败(img-34Rm6DxV-1564649104381)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365287536.png)]

颜色1

<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

[外链图片转存失败(img-ynslHkiU-1564649104382)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365395508.png)]

颜色2(此五颜色熟记)

  • bg-primary
  • bg-success
  • bg-danger
  • bg-warning
  • bg-info

[外链图片转存失败(img-hW23f8qI-1564649104382)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365578783.png)]

响应式表格

<table>外使用table-responsive

[外链图片转存失败(img-Z9AQTcHD-1564649104383)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564365756185.png)]

5.bootstrap边框

添加边框属性

默认添加一行 border: 1px solid #dee2e6!important;

这个属性好像是没什么卵用????

  • border
  • border-bottom
  • boirder-top
  • border-left
  • border-right

清除边框属性

  • border-0
  • border-top-0
  • border-bottom-0
  • border-left-0
  • border-right-0

添加边框颜色

  • border-info
  • border-danger
  • border-success
  • border-primary
  • border-warning
  • border-light
  • border-dark
  • border-white

rounded

  • rounded-circle
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .container {
            margin-top:100px;
        }
        span {
            display: inline-block;
            width: 75px;
            height: 75px;
            background-color: #eee;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="border"></span>
        <span class="border-bottom"></span>
        <span class="border-top"></span>
        <span class="border-left"></span>
        <span class="border-right"></span>
    </div>
    <div class="container">
            <span class="border-0"></span>
            <span class="border-bottom-0"></span>
            <span class="border-top-0"></span>
            <span class="border-left-0"></span>
            <span class="border-right-0"></span>
    </div>
    <div class="container">
            <span class="border-success"></span>
            <span class="border-primary"></span>
            <span class="border-danger"></span>
            <span class="border-warning"></span>
            <span class="border-info"></span>
            <span class="border-light"></span>
            <span class="border-dark"></span>
            <span class="border-white"></span>
    </div>
    <div class="container">
        <span class="rounded"></span>
        <span class="rounded-circle"></span>
    </div>
</body>
</html>

[外链图片转存失败(img-yO4iz584-1564649104383)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564367463555.png)]

6.display + text + mw-100 mh-100

display

  • display-[value]-none (important!!!)
  • display-inline-block
  • display-table

text

  • text-truncate 当行超出部分以省略号显示
  • text-nowrap 超出不换行
  • text-justify 消除行末空白的情况

mw-100 mh-100

  • mw-100 => max-width:100;
  • mh-100 => max-height:100;
<body>
    <div class="container">
        <p class="w-25 text-nowrap border">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint officiis
            natus, sit dolor incidunt ducimus explicabo, eum possimus totam quasi, repellendus corrupti. Cumque tenetur
            animi quas, non a harum eligendi?</p>
        <p class="w-25 text-truncate border">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint officiis
            natus, sit dolor incidunt ducimus explicabo, eum possimus totam quasi, repellendus corrupti. Cumque tenetur
            animi quas, non a harum eligendi?</p>

        <div style="height: 200px;width:200px;">
            <div style="height: 400px;width:400px;background: violet;" class="mw-100 mh-100"></div>
        </div>
    </div>
</body>

[外链图片转存失败(img-XxVL0HKv-1564649104384)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564369549578.png)]

7.bootstrap边距和阴影

边距

https://v4.bootcss.com/docs/4.0/utilities/spacing/

内边距

t-top, l-left, r-right, b-bottom, x-水平 ,y-垂直

  • p-[断点]-[边距的值]
    • 边距值为0-5和auto
  • p-xl-1 大屏幕下所有内边距为0.25rem
  • pt-md-5 中等屏幕上内边距为3rem
  • px-auto 水平为padding:auto;
 <div class="container">
      <div class="w-25 bg-danger mx-auto pt-3" style="height: 100px;">123</div>
      <div class="w-25 bg-success m-5 p-3">123</div>
 </div>

[外链图片转存失败(img-yFENXQfD-1564649104384)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564383294591.png)]

外边距

同内边距,把p变为m即可

阴影?(?效果进不来)

8.定位 + 显示隐藏 + 关闭图标

定位

position

  • class=“position-relative/position…”
 <div class="position-relative border" style="width: 200px;height: 200px;">
    <div class="position-absolute bg-success" style="width: 100px;height: 100px;top:0;right:0;"></div>
</div>

[外链图片转存失败(img-zgnb1oG2-1564649104385)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564385257573.png)]

固定于顶部

 <div style="padding:100px 0; ">
            <header class="bg-danger fixed-top" style="height: 100px;"><div class="container">header</div></header>
            <div class="container">
                1<br>2<br>3<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                111<br>222<br>333<br>
            </div>
          <footer class="bg-danger fixed-bottom" style="height: 100px;"><div class="container">footer</div></footer>
</div>

[外链图片转存失败(img-Q3kC7WsO-1564649104385)(C:\Users\0123\AppData\Roaming\Typora\typora-user-images\1564385722769.png)]

贴齐于顶部

<h1 class="text-center">大标题</h1>
        <header class="bg-danger sticky-top" style="height: 100px;">
            <div class="container">header</div>
        </header>
        <div class="container">
            1<br>2<br>3<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            111<br>222<br>333<br>
        </div>
        <footer class="bg-danger" style="height: 100px;">
            <div class="container">footer</div>
 </footer>

效果同上,且可以在上面 增加内容

invisible 依旧占有位置

 <h1 class="text-center invisible">大标题</h1>

关闭图标close

  <button class="close">x</button>

.close {

  1. ​ float: right;
  2. ​ font-size: 1.5rem;
  3. ​ font-weight: 700;
  4. ​ line-height: 1;
  5. ​ color: #000;
  6. ​ text-shadow: 0 1px 0 #fff;
  7. ​ opacity: .5;

}

9.嵌入

<!-- 16by9  16:9的尺寸显示 -->
<div class="embed-responsive embed-responsive-1by1">
   <iframe src="http://www.taobao.com" class="embed-responsive-item"></iframe>
</div>

10.图像替换

  • 利于搜索引擎优化
  • example:将图片替换成标题
 <h1 class="text-hide" style="background:url('./1.jpg');height: 100px;width: 100px;">这里的文字显示不出来,被text-hide掉</h1>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值