Bootstrap的学习总结

最新推荐文章于 2022-09-21 20:36:45 发布

大蒜头的季节

最新推荐文章于 2022-09-21 20:36:45 发布

阅读量598

点赞数

文章标签： javascript jquery css3 html5

本文链接：https://blog.csdn.net/weixin_46278125/article/details/106462591

版权

入门

之前看了Bootstrap 3版本的，这次再回顾的时候没想到出到v4.4版本了，于是又重新看了一遍。

这次更新好像取消了列的一个“推拉“操作，col-*-push-*,col-*-pull-*;
然后列的最小单位也变了，不再是从xs开始的，而是从sm开始的，上限从原本的lg变成了xl，几个断点的数字是要记住的；
还增加了很多预定义的类，比如ml-3,px-3这个m呢就是margin的简写，p也同理，l就是left的意思，x就是x轴方向，两边。
导航栏以前的反色nav-inverse似乎也不好用了，现在取而代之的是nav-dark，只有更酷炫，好像导航栏四周的圆角border-radius也被去掉了，确实应该去掉。
增加了个card卡片组件，这个组件好像还不错，我大概浏览了一下，功能好像蛮强大的，就是可以运用到的场景应该是蛮多的。
对了，以前好像只有container以及container-fluid，现在在这两者之间加了更多的控制，container-sm,container-md。
一个小功能，在多个class='col'之间加clas=‘w-100’可以换行。
以前似乎没有在class上添加align-item-start,justify-content-start这些功能,这些预定义的样式就如同以前写的flex的布局的样式，order-last,order-1也是一样，只不过这里面数字小的靠前。
默认全局的元素都添加了box-sizing:“border-box”，包括*::before和*::after。这可以确保元素声明的宽度不会因为填充或边框而超过，避免影响到周围其他元素的排布。
这里面的1rem单位默认为16px
字体默认设置为本机的字体。

栅格系统

栅格系统就是在一个class=‘row’里将其子元素划分为多少个格子

<div class='row'>
	<div class='col-md-3'>
	</div>
		<div class='col-md-3'>
	</div>
		<div class='col-md-3'>
	</div>
		<div class='col-md-3'>
	</div>
</div>

这样就是在屏幕的尺寸到达md这个字母所代表的临界值时，也就是768px时，原本的独占一行变成了如其名字所诠释的只占三格。
还有别的也是大同小异，也有不这么细分的，直接

<div class='row row-cols-2'>
	<div class='col'>
	</div>
		<div class='col'>
	</div>
		<div class='col'>
	</div>
		<div class='col'>
	</div>
</div>

这样就是一行只能容纳下两个格子，还可以不指定一行能具体装多少个格子，直接：

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

它会动态的分配空间。

下面是控制行在整个父容器中所处的位置

<div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>

布局

Bootstrap 4版本的话默认大部分元素都是添加了display:flex的布局样式，但是官方考虑到每个都添加可能会影响一些浏览器默认的布局，所以如果你需要给指定的元素加flex的话只需要class=‘d-flex’；
还有float布局，直接class=‘float-left/right’就可以了，如果有些情况下不行，要考虑到是不是当前该原本被设置为flex导致这个float失效了。
class=‘text-center’，class=‘text-left’,class='text-right’也都还不错。
在ul上添加class="list-unstyled"应该就可以忽略掉原生的“点”的样式。
在ul上添加class="list-inline"应该就可以让<li></li>这些子元素水平排布，这个在修改导航条的时候可以试试，比如在nav的右部分添加一个ul。
还有些能简化书写的类名不记得了，感觉记住几个常用的吧，东西确实有点多，只要你有印象，在需要的时候可以即时查阅到也行。

组件

稍微说一下用这个几个组件的体会。

警告框

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>

这个就是改变一下背景色，通过这些状态类，success,danger，primary，后面的按钮也会涉及这些状态类。

徽章

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>
<span class="badge badge-success">Success</span>
<span class="badge badge-pill badge-primary">Primary</span>

制作一个小的标志，参照这样的格式去用就可以了，看情景改变一下状态（颜色）。

面包屑导航

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

这个就是打开一些级联的标签时，产生了一些路径，这时候就可以使用到这个组件。当前所处于的标签、目录注意在class上多加一个active以及aria-current="page"

按钮

<button type="button" class="btn btn-primary">Primary</button>
<a class="btn btn-primary" href="#" role="button">Link</a>
<input class="btn btn-primary" type="submit" value="Submit">
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

上述这些分别表示不同状态的按钮，你可以用a标签来表示，也可以用button或者input来表示，如果要切换颜色则class='btn-success/primary/...(别的)'；如果要改变大小，则class='btn-lg/sm'，还可以外边框加上颜色。

按钮组

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

这个没什么好说的，就是将按钮合并在一起。

卡片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Cards卡片这一模块功能还是蛮丰富的，由于内容比较多，这里就不赘述；
在做一下商城页面的时候，大多数就是一个图片下面再配一些描述descrption，那么就好比就是一个个卡片，用这个模块是再合适不过了。

轮播（Carousel）

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

这个没什么好说的，直接套就是了，将模板中的图改成你自己的图，轮播的时间也可以时具体情况而定。

折叠（Collapse）

这个代码太多就不写了，这个适用的场景暂时也没有想到，不过特征还是比较明显的，点击一个栏目底下会显示相应的文字内容，点击另一个栏目，上一个栏目的内容就会收起来，然后显示当前栏目的内容。

下拉菜单（Dropdowns）

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

导航条有时候个别标签会需要用到下拉菜单，级联菜单的时候也会用到下拉菜单，特征也是明显的。

表单
表单还是比较重要的一块内容，这里面分为普通的表单和带有校验的表单，这一块内容没有来得及做研究，有疑问的同学可以去官网看一下。
输出组

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

这一块可以用作搜索框。

巨幕

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

这个一般用于国外的一些网站，他们总是喜欢给访客先来个巨幕，然后再具体到某一个分支，将页面表现的很简约。当然，你可以视情况在你的首页先来个巨幕，然后提供几个按钮，分别指向具体的接下来的主要业务的页面。

列表组

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

只是你结构时列表的地方，我觉得它们在宏观上都是列表组。

媒体对象

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>