bootstrap5.x基础语法(一)

内容主要包括以下三个大块

  1. 布局

  2. 页面内容

  3. 表单

前置准备:到官网或者中文网下载好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>


一、布局

断点(熟记)

断点即临界点。例如说手机端屏幕分辨率最大为576px,那么576px就是一个断点,一旦超过了576px,那么就判定设备不是手机。

响应式不是逐渐变化的,而是达到临界点瞬间变化的。倘若我们某个单元格占12个位置,设置了临界值sm(屏幕大小>=576px)时单元格6个位置。那么在576px之前,单元格默认占12个位置,一旦超过了576px,单元格就变为占用6个格子

bootstrap中定义了如下几个临界点:

断点 中缀 范围(px)
Small(小,平板或者老笔记本) sm >=576
Medium(中,窄屏电脑) md >=768
Large(大,宽屏电脑) lg >=992
Extra large(超大,宽屏电脑) xl >=1200
Extra extra large(特大,高清电脑或广告设备) xxl >=1400

容器(了解一下)

容器是bootstrap最基本的布局元素。它的容器类型有以下三种:

  1. container, 默认容器,其宽度为在每个响应断点处之前,都是前一个断点的最大宽度。

  2. container-fluid, 流式容器,始终占浏览器宽度的100%

  3. container-{breakpoint}, 断点容器,在到达该断点前,其宽度始终占浏览器宽度的100%,在到达断电后,其宽度始终为断点最大宽度。其中断点值为以下几个值

{breakpoint}: 断点中缀。可用值: sm、md、lg、xl、xxl

栅格系统(重点来了)

首先,栅格系统需要包裹在容器内!

栅格系统把容器横切为了一个或个行

然后!每个行被划分为了12个位置,根据需要对单元格进行划分,比如说一个单元格要占3个位置,那么就是:

,当然,我们也可以做响应式,小屏幕设备(sm)占6个位置,中设备上占3个位置那么:

具体上个代码容易理解一点

...
<style type="text/css">
div{
    border:1px solid red;
}        
    style>

<div class="container">
    <div class="row">
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
    div>
    <div class="row">
        <div class="col-4">4div>
        <div class="col-4">4div>
          
        <div class="col">4div>
    div>

    <div class="row">
        <div class="col-4">
            <div class="row">
                <div class="col-1">1div>
                <div class="col-2">2div>
                <div class="col-9">9div>
             div>
        div>
    div>
div>
...

效果如下,(栅格布局的高度是有内容撑起的)

bootstrap5.x基础语法(一)_第1张图片

间隙

这部分我没搞懂,待续~~

布局通用类

元素显示方式

语法: d-{value},d-{break-point}-{value}

value可用值 : none``inline``inline-block``block``grid``table``table-cell``table-row``flex``inline-flex

例子 :

// 默认隐藏,到中屏幕设备时显示
<div class="d-none d-md-block">div>

边距

语法设定: {m|p}{r|l|b|t|x|y|}-{size} (例如:mr-4、m-4、mt-4…)

翻译一下:m:margin,p:padding,r:right ,l:left,t:top,b:bottom,x:(r+l),y:(t+b)

size范围设定:

范围
0 0
1 $spacer * .25
2 $spacer * .5
3 $spacer
4 $spacer * .1.5
5 $spacer * 3

例子:

// 左右外边距为3
<div class="mx-3">div>
// 四边的外边距为3
<div class="m-3">div>

显示和隐藏

带有.invisible类别的元素,属性将都在视觉上与屏幕阅读器的用户中隐藏。只是隐藏,还是会占着位置

语法: invisible|visible

例子:

// 隐藏
<div class="invisible">...div>
// 隐藏反的反操作
<div class="visible">...div>

堆叠层级(z-index)(这部分要求我们熟知,但不鼓励定制这些数值)

我们需要在我们的分层组件(工具提示、弹出框、导航栏、下拉菜单、模式)中使用这些标准集,以便我们可以在行为上保持合理一致。bootstra给这些组件定义了不同的层级:

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

二、页面内容

reboot(了解即可)

当你引入bootstrap.css后发现页面发生了写微妙的变化, bootstrap为页面的将页面的基础元素做了一些优化,使得它更加更能为我们接受。

它重写了包括但不限于p、div、ul、li、input、form、section的标签样式

文字排版(Typography)重要

  1. 标题

h1-h6 例如 :

最大标题

。除此之外,如果你想突出标题,可以考虑用display heading以获得更大、更细、稍具有风格化的标题样式

语法: display-{size}

size范围: 1-6 (数值越大字体越小)

例如 :

display head

  1. 前导主题

使用.lead让一个段落脱颖而出。

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
p>
  1. 内联文本元素【这里不做多演示】
  • .mark 高亮
  • .small 小字体
  • .text-decoration-underline下划线
  • .text-decoration-line-through 删除线
  1. 来源引用【例如引用了鲁迅先生的话】

语法:用

来包裹引用和作者

例子:

<figure>
<blockquote class="blockquote">
我没有说过这话,不过确实有理
blockquote>
<figcaption class="blockquote-footer">
鲁迅
figcaption>
figure>

效果:
在这里插入图片描述

  1. 列表

a. 去除列表项符号

语法: .list-unstyled

例子:

b. 去除ul的列表项符号,并添加少许margin

例子:

<ul class="list-inline">
    <li class="list-inline-item">li>
    <li class="list-inline-item">li>
    <li class="list-inline-item">li>
ul>

图片

通过 Bootstrap 所提供的.img-fluid 类让图片支持响应式布局。其原理是将max-width: 100%;height: auto; 赋予图片,以便随父元素一起缩放

例子:

<img src="..." class="img-fluid" alt="...">`

除了它提供的 border-radius utilities 外,我们还可以使用.img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。

<img src="..." class="img-thumbnail" alt="...">

表格(熟练)

由于

横跨其他第三方套件广泛的使用,像是calendars和date pickers,因此可选择使用Bootstrap的表格。在任何
加上基本类别 .table,接着使用我们的可选修饰类别或是自定义样式进行扩展。

  1. 给表格定义颜色

语法: table-{style}

style:可用值:

primary、secondary、success、danger、warning、info、light、dark

例子:

  1. 表格的条纹(一行深色一行浅色),可与style搭配食用

语法: table-striped

例子:

  1. 表格行悬停效果(hover)

语法: table-hover

例子:

  1. 通过添加.table-active高亮显示表行或单元格

例子:

<table class="table">
<thead>
...
thead>
<tbody>
<tr class="table-active">
...
tr>
<tr>
...
tr>
<tr>
<th scope="row">3th>
<td colspan="2" class="table-active">Larry the Birdtd>
<td>@twittertd>
tr>
tbody>
table>

三、表单(重要)

bootstrap在表单上为我们分了以下几大类:控件类、下拉列表、范围选择。功能上:有输入组合、浮动标签、表单验证

控件类(包括:文本框、文本域、数字、文件、颜色、邮箱、手机号)

a. 基础类: form-control

b. 设置大小(大小是额外的类):form-control-{size}

size取值:lg、sm、{默认,即不加}

例如:

其他属性: 禁用和只读文本

禁用使用原生的disabled属性、只读使用readonly只读输入看起来更轻(就像禁用的输入一样)。只读文本的话,除了加上只读属性还要添加form-control-plaintext类名

例子:

<div class="mb-3">

<label for="exampleFormControlInput1" class="form-label">Email addresslabel>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
div>
<div class="mb-3">

    <input type="email" class="form-control-plaintext"  readonly/>
div>
<div class="mb-3">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">textarea>
div>

c. 文件:也是控件类

d. 颜色:

颜色和大小一样,是属于额外的类。颜色选择器type要改为color

基础类:form-control-color

例如:

<label for="exampleColorInput" class="form-label">Color pickerlabel>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

下拉列表

基础类: form-select

例子:

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menuoption>
    <option value="1">Oneoption>
    <option value="2">Twooption>
    <option value="3">Threeoption>
select>

-设置大小

语法: form-select-{size code}。取值: sm、lg(设置大小是额外的类)

例子:如上例子

-禁用

标签加入disabled属性即可

单选和多选

基类: form-check

先看案例:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
    <label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
label>
div>

是否有点疑惑?前面的控件直接加类名即可,这里为什么需要多一层div呢?答案是:因为引入了开关组件(switch)【本质上还是多选\单选】。如下

<div class="form-check form-switch">
     <input class="form-check-input" name="ckb[]" type="checkbox" value="" id="defaultCheck1">
     <label class="form-check-label" for="defaultCheck1">
Default checkbox
label>
 <div class="form-check form-switch">
     <input class="form-check-input"  name="ckb[]" type="checkbox" value="" id="defaultCheck1">
     <label class="form-check-label" for="defaultCheck1">
Checked switch
label>

效果大概是这样的

在这里插入图片描述

-内联,假如说你希望单选个多选再同一行上(bootstrap默认改为了块级元素),那么:

通过将.form-check-inline添加到.form-check,将复选框或单选框在同一水平行上分组显示。

例如:

<div class="form-check form-check-inline">
     <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1label>
div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2label>
div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)label>
div>

总结就是:需要一个外层的form-check,input还需要添加form-check-input类名,关联文本需要添加form-check-label类名

范围选择(Range)

语法: 使用 创建自定义控件。需要添加类名form-range

  • 禁用: 一样是添加添加disabled属性

  • 最大值、最小值和间距:max设置最大值,min设置最小值,step设置间距

需要说明的是间距,间距就是每次滑动选择器的最小增量或减量。看一个完整案例:

<label for="customRange3" class="form-label">Example rangelabel>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

效果如下:
bootstrap5.x基础语法(一)_第2张图片

输入组合

输入组合是把一个或活个表单元素组合到一块。每个表单组件都是有四边圆角的,组合后会消除掉除了多余圆角。

效果如下,示例中每行都是一个组合:

bootstrap5.x基础语法(一)_第3张图片

  • 定义一个组合的语法类名为:input-group

组合内直接放入表单元素即可。如果需要添加组合文本,需要添加组合文本类input-group-text,上面示例中,灰色背景的字体即组合文本。

  • 定义输入组合的大小,定义大小是额外的类名

    语法:input-group-{size}

    size取值: sm、lg

    例子:

看一个案例来消化一下:

<div class="input-group mb-3">
<span class="input-group-text">$span>
<span class="input-group-text">0.00span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
div>

<div class="input-group">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$span>
<span class="input-group-text">0.00span>
div>

效果如下:

bootstrap5.x基础语法(一)_第4张图片

浮动标签

.form-floating 中包装一对元素,以启用带有Bootstrap文本表单字段的浮动标签。必须放在第一位!!!

可使用的地方:文本域、下拉框、布局中

例子:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email addresslabel>
div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Passwordlabel>
div>

表单的验证

验证类:

  • 用于input提示:is_valid(正确提示)、is_invalid(错误提示)

  • 用于输入框下边的提示框的: invalid-feedbackvalid-feedback注意:必须跟在input之后

  <form class="row g-3"> 
   <div class="col-md-4"> 
    <label for="validationServer01" class="form-label">First namelabel> 
    <input type="text" class="form-control is-invalid" id="validationServer01" value="Mark" required="" /> 
    <div class="valid-feedback">
      Looks good! 
    div> 
    <div class="invalid-feedback">
      invalid! 
    div> 
   div> 
  form>

关于验证类,需要说明一下,文档里面距离挺多看的挺复杂的。bootstrap为我们提供的是验证的静态样式,动态的样式还需要添加一点js。

input提示类和文本提示类两者的同步关联是通过input的验证类来实现的。

流程是:判断input中的验证类是is-invalid还是is-valid。假如说使用了is-valid,input边框变为绿色,还会追加成功的icon,在输入框之后有文本提示类valid-feedback,的话,会显示出来;另一种情况,is-invalid,input边框变为警告色,追加警告icon,在输入框之后有文本提示类invalid-feedback的话,会将该该提示显示出来,然后隐藏掉valid-feedback

end:第一部分结束,后续还有第二部分:组件和统用类

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