Bootstrap代码与图文

最新推荐文章于 2022-05-02 21:53:59 发布

jwz934738949

最新推荐文章于 2022-05-02 21:53:59 发布

阅读量571

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/jwz934738949/article/details/118435713

版权

BootStrap 专栏收录该内容

9 篇文章

订阅专栏

代码样式

使用<code>元素，将代码放入其中，会默认将其中的文本识别文代码
但是无法识别其中的特殊符号与空格、回车等字符，在<code>外层添加<pre>就可以实现识别特殊字符
在代码区域添加.pre-scrollable，可以实现默认区域滚动，默认高度为350px
使用<var>标签识别变量
使用<kbd>识别键盘输入
使用<samp>识别实例

<pre class="pre-scrollable" style="width: 250px; height: 250px">
  <code>
    var a = 10, b= 5;
    var c = a + b;

    function add(num1, num2) {
      var num = num1 + num2;
      return num;
    }

    add(a, c);
        var a = 10, b= 5;
    var c = a + b;

    function add(num1, num2) {
      var num = num1 + num2;
      return num;
    }

    add(a, c);
        var a = 10, b= 5;
    var c = a + b;

    function add(num1, num2) {
      var num = num1 + num2;
      return num;
    }

    add(a, c);
  </code>
</pre>
<hr>
<var>var a = a + c;</var>
<hr>
<kbd>Enter</kbd> + <kbd>Shift</kbd>

图文样式

为图片添加类.img-fluid或者添加样式max-width:100%;height:auto;实现响应式布局中的图片默认宽度为整个屏幕
添加类.img-thumnail为图片添加空心边框样式
添加.float-left与.float-right为图片设置左浮动与右浮动
实现图片的居中显示。可以设置图片为区块，添加类.d-block，之后设置margin左右边距为auto或者添加类.mx-auto来实现居中
由于图片是内联样式，在父容器中添加类.text-center也可以实现图片的居中
使用H5的<picture>标签来进行图片的响应式设计
使用<figure>与<figcaption>实现图文组合

<!--实现图片居中-->
<div class="text-center">
  <img src="images/testing.jpg" alt="" class="img-thumbnail">
</div>
<img src="images/testing.jpg" alt="" class="img-thumbnail d-block mx-auto">

<!--通过picture实现响应式设计-->
<picture>
  <source srcset="images/test.png" media="(max-width:800px)">
  <!--  超过800px显示-->
  <img src="images/testing.jpg" alt="">
</picture>
<br>
<!--图文结合显示-->
<figure class="figure">
  <img src="images/testing.jpg" alt="" class="figure-img">
  <figcaption class="text-center">figcaption文本内容</figcaption>
</figure>