bootstrap5

##############

bootstrap里面提供了大量的常用组件，可以直接使用或者简单进行二次开发，加快日常业务的开发速度。同时，有些组件需要跟js(jQuery)配合，实现组件的交互效果。

里面的组件按是否需要js，可以分为两类:

  • 无需js配合: Button系列、Form、Input系列、DropDown、Jumbotron、Label、Alert、Cards、Nav系列、Breadcrumb、Pagination、Progress、List
  • 需js配合: Modal、Tooltips、Popovers、Carousels

需要注意的是Cards是bootstrap4新增的组件。

 

 

  • margin（外边距）：是指从自身边框到另一个容器（包括父容器与同级容器）边框之间的距离，是容器外距离。避开使用margin-top

  • padding（内边距）：是指自身边框到自身内部子容器边框之间的距离，是容器内距离。

bootstrap5的特点有下面几点：

  1. 不在支持internet explorer10和internet explorer11。节省了很多为兼容而写的代码，同时也可以更好的运用html5和css3的一些新特征。

  2. 不再依赖jQuery。这里说的不再依赖是说jQuery不再是必须的，如果你需要jQuery，依然可以单独引入，另外单独引入的话你还可以直接使用最新版本的jQuery，而不是Bootstrap配套的版本。

  3. 优化了各个组件的外观，一直以来Bootstrap给人诟病的一点就是做出的网站页面太死板，面目丑陋，需要自己另外写css优化，现在Bootstrap5做好的页面已经非常美观，可直接应用了，大家可以直接看看www.bootstrap.cn ，纯Bootstrap5开发，没有使用任何其他css文件。

  4. 增加了很多组件，现在基本上设计网页的常用组件都能找到了，网页设计变得不要太轻松了，简单复制、粘贴、修改以下文字，拼凑起来即可。

  5. 体积大大减小。完全可以将bootstrap.min.css和bootstrap.bundle.min.js提取出来，总共不到100k，目前没发现任何问题。

 

以下是Bootstrap重置元件的规范和原因：

  • 更新部分浏览器的预设值，在可变动的元件间距上使用rem替代em。

  • 避开使用margin-top。垂直边界的margins可能会重叠，进而产生不能预期的结果。更重要的是，使用单向的margin是一个更单纯的思考模式。

  • 为便于跨设备大小进行缩放，块元素应使用rems作为边距。

  • 尽量减少字体相关属性的声明，尽可能使用inherit。

bootstrap.css文件大概有1万行的样子，咱们使用的时候，只需关注咱们的html结构中元素的class属性，我们使用bootstrap的时候，只需设置元素的class属性即可

因此，熟悉bootstrap.css文件中的常见类class选择器即可

 

自定义全局属性：用于设置颜色和字体：

 

 

设置全局box-sizing:border-box：

 

间距设置：

 

 

 

 

容器：默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距：一个页面只需要一个容器标签，将其他所有可视内容包裹进去即可：

  1. margin简写为m，padding简写为p

  2. top简写为t，bottom简写为b，top和bottom简写为y，left简写为start的s，right简写为end的e，left和right简写为x

  3. 创建一个固定宽度的容器：container

  4. 创建一个全屏幕尺寸的容器：container-fluid

  5. 创建响应式容器：container-[sm|md|lg|xl|xxl]

 

 

 

 

 

 

 网格系统：请确保每一行中列的总和等于或小于12：

十二网格系统：

十二栅格系统的意思是将整个屏幕按宽度划分为十二等份，而一等分代表屏幕宽度的十二分之一，为什么划分为十二等份，而不是十等分或其他等份呢，这是因为12是1，2，3，4，6的最小公倍数，根据经验，按照这样的划分是最美观和实用的。

Bootstrap 网格系统设计三个标签，分别是container，row，col：

 

  • container是容器，在上一节中，专门做了详细的介绍。

  • row是行的意思，代表着一个水平行

  • col是单元格，代表着具体每一个单元格，其写法有三种：col、col-栅格数（如col-3）、col-屏幕大小-栅格数（如col-md-3）。

 

 

 

=======================================================================================================

  1. 使用行（row）来创建列的水平组。

  2. 一个页面内可以有多个行。

  3. 行必须放置在 容器（container）内，以便获得适当的对齐（alignment）和内边距（padding）。

  4. 内容应该放置在列（col）内，且唯有列可以是行的直接子元素。

  5. 列内还可以嵌套行，列内的行无需container，因为列本身就是个容器。

  6. 可以直接使用预定义的网格类，比如 col-屏幕大小-栅格数，用于快速创建栅格布局。

  7. 预定义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，代表占屏幕宽度。

 

 

  • 如果我们不设置每个列的宽度，则默认有多少个列都会平均分布各列所占宽度；

  • 但是如果一行有超过12个列，将会出现不可预知的现象；

  • 如果你想布局超过12个，可以用表格；

  • 当每个单元格都设置了宽度数值，当一行中，剩下的空间不再容纳某个单元格的时候，会自动换行。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

规则：col-[sm|md|lg|xl|xxl]-[1~12]，比如：

 

  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>

 

 

<div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>

 

 

 

 

 

 举例说明：

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

 

 

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

 

 

 

 表单元素：

 

单选框type="radio"：form-check，form-check-input，form-check-label：

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

 

 复选框type="checkbox"：form-check，form-check-input，form-check-label：

 

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

 

 

 

 

如何编译Bootstrap的源代码：npm install;npm run dist

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

@@@@@@@@@@@@@@@@@@@

posted @ 2022-09-14 09:45  igoodful  阅读(607)  评论(0)    收藏  举报