bootstrap 内容总结-阿里云开发者社区

bootstrap 内容总结

2023-01-12 98

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： bootstrap 内容总结

 bootstrap 中的css根节点里面生命了许多的变量： 如：
    ：root{
        --bule: xxx,
        --yellow: xxx
    }
    使用方法：
    使用的时候使用 样式属性：var(--bule)， 使用关键字var 来取出样式的key,就可以使用变量css了
    // bootstrap 给所有的元素都变成怪异盒模型， 这样设置宽高不会增加盒子的大小
    *,::after,::before{
        box-sizing: border-box;
    }
    样式属性值为 ： inherite 为继承的意思  如 font-size： inherite 基础父级的字体大小 
   ================ bootstrap 排版======================
  //文本相关
    h1-h6的样式都已经修改了， 使用<h1> 或者<div class='h1'> 都是一样的
    自定义标签： <small class='text-muted'></small> (副标题)  使用方法： 如： <h3>主标题<small class='text-muted'>副标题</small> </h3>
     //更大的字体
     使用类名 display-1  display-2 display-3 display-4 依次变小一点  配合h1 - h6 使用
     //引言
     使用类名： lead
     //内联文本
      使用<mark></mark> 来标注重点标签 可以使用 mark类名也可以实现mark标签
      使用<del><del> 设置删除的的标签
      使用<ins><ins> 来使用新插入的标签
      使用<strong></strong> 加粗
      使用<em></em> 斜体
      使用<small> </small> 字体小一些 可以使用 small类名也可以实现small标签
      使用<abbr><abbr> 缩写的标签 
      使用<blockquote></blockquote> 实现引用的效果 使用方法：<blockquote class='blockquote'>内容 <footer calss='blockquote-footer'>谁说的</footer></blockqute>     
    // 字体的对齐方式： 使用类名 text-right(右对齐)  text-center(居中对齐)  text-left(左对齐)
  //列表相关
  //无特效列表
 去点： 使用类名 在ul上使用 list-unstyled 不能作用与嵌套列表中，只能单独使用于一个列表
    如： <ul class='list-unstyled'>
           <li>red</li>
           <li>
             <ul clias='list-unstyled'> 需要单独使用样式，否则下面的点还是会出现
                 <li>blued</li>
             </ul>
            </li>
        </ul>
 横向排列： 使用类名 list-inline (ul)  list-inline-item(li) 并和使用才生效
     如： <ul class='list-inline'>
            <li class='list-inline-item'>第一列</li>    //bootstrap3.x的版本在li上不需要是用类名
            <li class='list-inline-item'>第二列</li>    
            <li class='list-inline-item'>第三列</li>
         </ul>    
 超出一行内容省略： 使用类名： text-truncate（4.x）  text-overflow（3.x）
 ==============显示代码==================
 使用<code></code> 标签在页面上显示代码 尖括号需要使用 &lt; &gt;
 使用方法如： <code>&lt; html &gt;<code>  在页面上显示<html>
 使用<var></var> 显示变量   
 使用<kbd><kbd> 显示按钮
  ==============图片======================
  响应式的图片 在img标签里面使用 类名 img-fluid
  使用方法： 如 <div class='container'>
                 <div class='row'>
                    <img src='xxx' class='img-fluid' alt=''>
                 </div>
                </div>
   缩略图：在img标签里面使用类名 img-thumbnail
   圆角图片： 在img标签里面使用类名 rounded 会有一些默认圆角
   图片的对齐方式： 有两种： 自己对齐(使用浮动) 
                           通过父级来设置对齐： text-center(居中) text-left(居左对齐) text-right(居右对齐)
                           自己单独居中: 使用类名 d-block(设置inline-block) mx-auto(mrgin: 0 auto) 两个类名同时使用
   picture标签： 解决图片加载的问题，适配移动端，高清屏幕的用户加载高清图片  普通屏幕的用户加载普通图片
   使用方法：
   <picture>
       <source media='(min-width: 1200px)' srcset='xxx'>
       <source media='(min-width: 992px)' srcset='xxx'>
       <source media='(min-width: 768px)' srcset='xxx'>
       <source media='(min-width: 576px)' srcset='xxx'>
        <img src='xxx'> 当尺寸小于576的时候加载图片
        .webp 是一种图片的格式， 专门设置网页图片的图片格式 优点是： 体积小 而且高清， 但是不是所有的浏览器支持，存在兼容性问题（ios9.3以上， Android 4.4以上， chrome， Firefox支持，其他不支持）
   </picture>

bootstrap 内容总结

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

bootstrap 内容总结

热门文章

最新文章

相关电子书