HTML-Bootstrap下载和基本使用

Bootstrap官网啊下载,对于他的CSS样式我们用的基本就是DIST下的 dist/css/bootstrap.css和bootstrap.min.css。

head头部导入<link rel="stylesheet" type="text/css" href="./bootstrap-3.4.1/dist/css/bootstrap.css">

在官网可以看到关于meta标签讲解.为了考虑兼容移动设备,加入meta标签

<meta name="viewport" content="width=device-width, initial-scale=1">

1.布局容器

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<h1>原生的H1标签！</h1>
<h1>原生的 你好，Bootstrap！</h1>
<br>
<div class="container">
    <h1> container类的 你好，世界！</h1>
    <h1>container类的 你好，Bootstrap！</h1>

</div>
<br>
<div class="container-fluid">
    <h1>container-fluid 类的 你好，世界！</h1>
    <h1>container-fluid你好，Bootstrap！</h1>

</div>

效果图如下

2. 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列.