bootstrap5.x 基础三(通用类,终篇)

通用类

前置准备:到官网或者中文网下载好bootstrap5.x的包。其次是页面的基本文件引入,css文件在头部引入,js文件在底部引入确保能读取到节点。如下:

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!title>
  head>
  <body>
    <h1>Hello, world!h1>
    
    <script src="dist/js/bootstrap.bundle.min.js" >script>

    
    
  body>
html>

背景颜色

  • 语法: bg-{color}

  • color可用值 (bs的那11种颜色,再提一次): primary 、secondary 、success 、danger 、info 、warning 、light 、dark 、body 、white 、transparent

  • 颜色梯度,让背景颜色梯度显示

    .bg-gradient

    例子:

    <div class="p-3 mb-2 bg-primary text-white bg-gradient">.bg-primarydiv>
    

边框

  • 增加边框

    语法: border{-side}

    side 可用值: top(加上边框)、bottom(加下边框)、end(加右边框)、start(加左边框)、{不加}

    例如:

  • 减少边框

    语法:border-{side}-0

    side可用值: top(去上边框)、bottom(去下边框)、end(去右边框)、start(去左边框)、{不加则去除四边}

    例如:

  • 边框颜色

    语法: border-{color}

    color可用值: bs那11种

  • 边框半径

    语法: rounded-{type}

    type可用值:top(上两角)、bottom(下两角)、end(右两角)、start(左两角)、circle圆、pill(胶囊)

  • 边框框度

    语法: border-{number}

    number可用值 : 1、2、3、4

字体颜色

  • 语法:text-{color}

    可用值:bs的11种颜色

浮动和清除浮动

  • 清除浮动:在父元素上添加clearfix即可

    <div class="clearfix">...div>
    
  • 浮动

    语法: float-{position}

    position可用值:start(左浮动),end(右浮动),none(不浮动)

  • 响应式浮动

    语法: float-{size}-{position}

    size可用值:sm、、md、lg、、xxl、xl

互动

  • 文字选择

    <p class="user-select-all">当使用者点选时,这个段落将会被全选。p>
    <p class="user-select-auto">这个段落具有预设的提取行为。p>
    <p class="user-select-none">当使用者点选的时候,此段落将不会被提取p>
    
  • pointer事件

    pe-none:添加后不可被点击

    <p>
        <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">这个连接不可被点击这个连接不可被点选a>
    p>
    <p><a href="#" class="pe-auto">这个连接可以被点击(此为预设行为).a> 
    p>
    

溢出

<div class="overflow-auto">溢出出现y轴滚动条...div>
<div class="overflow-hidden">溢出隐藏...div>
<div class="overflow-visible">溢出显示不出现滚动条,超出也显示...div>
<div class="overflow-scroll">溢出出现两边的滚动条...div>

位置

  • 定位类型

    语法: position-{status}

    status 可用值 :static、relative、absolute、fixed、sticky

  • 定位位置值:

    语法:{direct}-{value}

    direct可用值: top、start、end、bottom(不用我解释了吧)

    value可用值: 0(0%)、50(50%)、100(100%)

例子:

<div class="position-absolute top-50 start-50">div>

阴影

  • 语法: shadown-{size}

    size取值:none、sm、lg、{默认大小}

    例子:

    <div class="shadow-none p-3 mb-5 bg-light rounded">No shadowdiv>
    <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadowdiv>
    

尺寸

  • bs预设的几种宽高:25%,50%,75%,100%和auto

  • 语法: {attribute}-{value}

    attribute可用值: w、h

    value: 25%,50%,75%,100%和auto

<div class="w-100"> div>

垂直对齐方式

<span class="align-baseline">baseline 基准线对齐span>
<span class="align-top">top 顶部对齐span>
<span class="align-middle">middle 中间对齐span>
<span class="align-bottom">bottom 底部对齐span>
<span class="align-text-top">text-top span>
<span class="align-text-bottom">text-bottomspan>

可视性

  • 即显示和隐藏(visible可视 、 invisible隐藏)

    例子:

    <div class="visible">...反隐藏(显示)div>
    <div class="invisible">...视觉上隐藏,还占着位置div>
    

你可能感兴趣的:(蓝桥web,css,html,前端)