AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

bootstrap 内容总结

2023-01-12 119
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
文章标签：
前端开发
游客ruqdfvh2iuyqc
目录
相关文章
31245487
|
10月前
|
编解码 前端开发 JavaScript
BootStrap文档（一）
BootStrap文档
31245487
123 0
BootStrap文档（一）
31245487
|
10月前
|
前端开发
BootStrap文档（二）
BootStrap文档
31245487
60 0
31245487
|
10月前
|
机器学习/深度学习 前端开发 算法
BootStrap文档（三）
BootStrap文档
31245487
45 0
Hello，C++！
|
10月前
|
移动开发 前端开发 HTML5
bootstrap笔记
bootstrap笔记
Hello，C++！
68 0
花花叔叔
|
前端开发 JavaScript
Bootstrap补充内容
Bootstrap补充内容
花花叔叔
110 0
Bootstrap补充内容
贺臣情缘
|
Web App开发 前端开发 JavaScript
Bootstrap系列 -- 1. 如何使用Bootstrap
一. Bootstrap 简介 　　Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网：http://www.bootcss.com/ 　　 二. Bootstrap核心 　  Bootstrap核心是Bootstrap.
贺臣情缘
1278 0
贺臣情缘
|
前端开发
Bootstrap系列 -- 4. 文本内容强调
一. 文本强调基本样式 　　.text-muted：提示，使用浅灰色（#999） 　　.text-primary：主要，使用蓝色（#428bca） 　　.text-success：成功，使用浅绿色(#3c763d) 　　.
贺臣情缘
857 0
贺臣情缘
|
Web App开发 前端开发 JavaScript
Bootstrap系列 -- 2. 标题
一. Bootstrap标题 　　在Bootstrap中使用标题和Html本身没有太大的区别使用h1-h6, 而Bootstrap只是默认修改了H1-h6的样式,网上找到如下资料参考 　　   二. Bootstrap 标题的修改 　　1. 重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20px；h4~h6重置后的值都是10px 　   2. 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
贺臣情缘
1177 0
贺臣情缘
|
前端开发
Bootstrap系列 -- 8. 代码显示
一. Bootstrap中的代码块 　　代码块一般在博客中使用的较多，比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示 　　1. 使用来显示单行内联代码 　　2. 使用来显示多行块代码 　　3.
贺臣情缘
812 0
贺臣情缘
|
前端开发
Bootstrap系列 -- 23. 图片
　　 　　图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格： 　　1、img-responsive：响应式图片，主要针对于响应式设计　　2、img-rounded：圆角图片　　3、img-circle：圆形图片　　4、img-thumbnai...
贺臣情缘
816 0