Bootstrap基本使用

最新推荐文章于 2024-09-04 19:23:53 发布

2401_86400291

最新推荐文章于 2024-09-04 19:23:53 发布

阅读量454

点赞数 4

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/2401_86400291/article/details/141887615

版权


<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

最基本的模板：


<!doctype html>

<html lang="en">

  <head>

    <!-- 必备的基本设置 -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>



    <!-- 可选的JavaScript -->

    <!-- 首先是jQuery，然后是Popper，然后引导js -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

  </body>

</html>

重要的全局样式：

Bootstrap 使用了一些重要的全局样式和设置，你在使用它们的时候要留意，这些全局样式和设置几乎都是专门针对跨浏览器样式的标准化（normalization）为目标的。下面就让我们一起来了解吧。

HTML5 doctype

Bootstrap 要求使用 HTML5 doctype。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。


<!doctype html>

<html lang="en">

  ...

</html>

响应式 meta 标签

Bootstrap 天生就是移动设备优先的，依照这一策略，我们首先为移动设备优化代码，然后根据需要，基于 CSS 媒体查询来对组件进行缩小或放大。为了确保所有设备能够正确渲染和触摸缩放，请将响应式 viewport meta 标签添加到标签中。


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Box-sizing

为了能够在 CSS 中直接调整尺寸，我们将全局的 box-sizing 从 content-box 切换为 border-box。这就确保了 padding 不会影响元素最终的宽度计算，但是这可能会导致第三方软件出现问题，例如 Google 地图和 Google 自定义搜索引擎。

虽然需要覆盖这一设置的情况极少，但是需要重置时，请使用以下代码：


.selector-for-some-widget {

  box-sizing: content-box;

}

栅格系统

Bootstrap 提供了一套响应式、移动端设备优先的流式栅格系统。系统会分为12列。

列在行内，行在容器内。


.col-xs		小于768px

.col-sm		大于等于768px

.col-md		大于等于992px

.col-lg		大于等于1200px

响应式列重置：


<h2>响应式列重置</h2>

	<div class="row">

		<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>

		<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

	</div>

列偏移：


<h2>列偏移</h2>

<!--总数为12列，超出的内容，换行显示-->

<!--列偏移出现换行时，从下一样重新开始计算位置-->

<div class="row">

	<div class="col-md-4">.col-md-4</div>

	<div class="col-md-4 col-md-offset-6">.col-md-4 .col-md-offset-4</div>

</div>

<div class="row">

	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

</div>

2401_86400291

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap基本使用

Bootstrap 天生就是移动设备优先的，依照这一策略，我们首先为移动设备优化代码，然后根据需要，基于 CSS 媒体查询来对组件进行缩小或放大。Bootstrap 使用了一些重要的全局样式和设置，你在使用它们的时候要留意，这些全局样式和设置几乎都是专门针对跨浏览器样式的标准化（normalization）为目标的。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。Bootstrap 提供了一套响应式、移动端设备优先的流式栅格系统。列在行内，行在容器内。
复制链接

扫一扫