• 前端基础之《Bootstrap（4）—全局CSS样式_图片、辅助类、响应式工具》

    一、图片形状

    1、圆角（.img-rounded）

    2、圆形（.img-circle）

    3、有边框，指甲盖效果（.img-thumbnail）

    1. <body>
    2. 	<div class="container">
    3.         <h1 class="page-header">bootstrap前端框架h1>
    4.         <img src="bs/image/222.jpg" width="100px" class="img-rounded" alt="" />
    5.         <img src="bs/image/222.jpg" width="100px" class="img-circle" alt="" />
    6.         <img src="bs/image/222.jpg" width="100px" class="img-thumbnail" alt="" />
    7.     div>
    8. body>

    二、辅助类（文本颜色）

    1、灰色（.text-muted）

    2、蓝色（.text-primary）

    3、绿色（.text-success）

    4、青色（.text-info）

    5、黄色（.text-warning）

    6、红色（.text-danger）

    三、辅助类（文本背景色）

    1、蓝色（.bg-primary）

    2、绿色（.bg-success）

    3、青色（.bg-info）

    4、黄色（.bg-warning）

    5、红色（.bg-danger）

    四、辅助类（关闭按钮）

    1、左上角关闭样式（.close）

    <h2 class="bg-info"><span>aaaaaaaaaaaaspan><span class="close">×span>h2>

    2、更多（.caret）

    <button class="btn btn-primary">更多<span class="caret">span>button>

    五、辅助类（快速浮动）

    1、左浮动（.pull-left）

    2、右浮动（.pull-right）

    六、辅助类（清除浮动）

    1、清除浮动（.clearfix）

    七、辅助类（让内容居中）

    1、让块标签居中（.center-block）
    等同于【margin 0 auto】

    八、辅助类（显示和隐藏）

    1、显示（.show）
    就是【display: block】

    2、隐藏（.hidden）
    就是【display: none】

    九、响应式工具

    1、表格响应式（.table-responsive）

    2、图片响应式（.img-responsive）

  • 相关阅读:
    《代码大全2》第16章 控制循环
    windows PC virtualBox 配置
    一文搞懂│php 中的 DI 依赖注入
    npm 彻底卸载
    华为云HECS云服务器docker环境下安装nginx
    墨者学院 Apache Struts2远程代码执行漏洞(S2-032)
    Shopee买家通系统之如何注册虾皮账号
    hyperf 三十一 极简DB组件
    PyTorch中实现Transformer模型
    1100：金币（信奥）
  • 原文地址：https://blog.csdn.net/csj50/article/details/127648260