Bootstrap入门--未完成

最新推荐文章于 2024-07-20 15:49:14 发布

千霜

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量293

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/jdbdh/article/details/88805445

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

一介绍

bootstrap是一个为前端快速搭建网站而设计的前端框架，提供了很多可用的模板。通过bootstrap可以快速搭建出网站，但是个性化的样式仍需要自己设计。

bootstrap是响应式的，能够根据设备宽度而呈现不同样式；也是mobile-first的，所有的样式最先为小屏幕设置设计的。这样设计十分合理，因为手机样式通常是最简单的。

bootstrap使用了jquery，并且对jquery扩展了一些和bootstrap相关的函数，因此引入bootstrap前先使用jquery。

bootstrap覆盖了所有元素的全局样式，并设置box-sizing: border-box;

下面给出使用bootstrap的一个模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 保证网页宽度与设备宽度一致 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>title</title>
    <link rel="stylesheet" href="lib/bootstrap-4.3.1-dist/css/bootstrap.min.css">
</head>
<body>
	<!-- 主题内容 -->

	<!-- jquery必须在bootstrap前 -->
	<script src="lib/jquery-3.3.1.min.js"></script>
	<script src="lib/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

二使用

bootstrap对css样式进行了简单的封装，通过class呈现给开发者使用，使开发更为便捷，但仍需要了解class如何被实现，这有助于对bootstrap的灵活运行，而不是死记硬套。当然bootstrap也提供了很多组件的模板，可以直接套用，更为个性化的设计需要自己覆盖class部分样式。

2.1 容器

容器用来包裹其他元素。有两种容器

.container：对于不同设备屏宽有相应的固定宽度，并且居中容器。
.container-fluid：占据所有屏宽（width:100%）

可以出现多个容器，但容器不应该被其他元素包含。

2.2 网格布局

bootstrap4的网格布局是基于flexbox的，将宽度分为12等份（列），一列中元素可以分配不同等份（列），但加起来共12份（列）。

每一行的容器使用.row标识，行容器中元素使用如下class标识在不同环境下占据空间的比例：

.col[-*]：样式（比例）应用于小设备（如手机）及其更大设备
.col-sm[-*]：样式（比例）应用于屏宽>=576px的设备（如平板），否则，每个元素占据整行（width:100%）
.col-md[-*]：样式（比例）应用于屏宽>=768px的设备（如笔记本），否则，每个元素占据整行（width:100%）
.col-lg[-*]：样式（比例）应用于屏宽>=992px的设备，否则，每个元素占据整行（width:100%）
col-xl[-*]：样式（比例）应用于屏宽>=1200px的设备，否则，每个元素占据整行（width:100%）

其中*表示元素占的比例，不指定比例表示所有元素等宽）

从源码中很容易看出使用方法。如果想在不同设备宽度下使用不同比例呢？这用到了叠层的知识，即多个样式作用时，哪个样式生效，如：

  <div class="row">
    <div class="col-sm-4 col-10">column 1</div>
    <div class="col-sm-8 col-2">column 2</div>
  </div>

在平板设备上，.col-*和.col-sm-*样式都作用，但只有.col-sm-*生效，因为bootstrap.css中.col-sm-*位于.col-*之后出现，覆盖.col-*的样式。而在手机设备上，只有.col-*样式生效，因为.col-sm-*的媒体查询非匹配。注意，与class中的书写顺序无关。

注意，下面说到响应式时，它的样式规则与网格布局差不多！！！

2.3 文字排版

bootstrap使用新的样式覆盖了元素的默认全局样式，并且提供了对应于文本样式的class。只是简单的css样式对应关系而已，下面列出常用的：

text-center或text-[sm|md|lg|xl]-center：居中文字，同时也是响应式的。

没了，，是的，具体参考：Bootstrap 4 Text/Typography

2.4 颜色

前景颜色的class以text为前缀：
在这里插入图片描述
背景颜色的class以bg为前缀：

具体class名，在IDE中输入前缀，就有自动提示或补全了

2.5 表格

首先form元素使用class .table，其他关于表格外观的class置于.table之后，如：

.table-striped:The .table-striped class adds zebra-stripes to a table
.table-bordered：The .table-bordered class adds borders on all sides of the table and cells:
.table-hover：The .table-hover class adds a hover effect (grey background color) on table rows
.table-dark：The .table-dark class adds a black background to the table
.table-hover：The .table-hover class adds a hover effect (grey background color) on table rows
.table-sm：The .table-sm class makes the table smaller by cutting cell padding in half

如果表格列太长，导致页面过宽呢？可以使用.table-responsive，但是我觉得太丑了，建议使用在form元素上css样式overflow-x: auto;