bootstrap基础

发布时间 2023-04-20 09:37:11作者: 挖洞404

1、介绍

bootstrap是来自twitter的一个前端框架,基于html、css、js和jquery,能够快速、灵活的开发具备良好可视化的界面与功能。

目前主要有3、4、5版本,一般使用版本3即可。

Bootstrap中文网 (bootcss.com)

Bootstrap 教程 | 菜鸟教程 (runoob.com)

2、下载

起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

3、布局容器

<div class="container>

</div>
  • bootstrap需要为页面内容和栅格系统包裹容器
  • .container类用于固定宽度并支持响应式布局的容器
  • .container-fluid类用于100%宽度,占据全部视口的容器

4、栅格系统

  • 系统根据屏幕或者视口,自动分为最多12列。
  • 行row必须在布局容器中,而在行row中创建水平的列
  • 列可以设置padding属性控制列与列之间的间隔
  • 如果一行的列大于12,多余的元素作为一个整体另起行
  • .col-md-*适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。
  • .col-md-offset-*,将列向右侧偏移一个或多个单位
  • 行中的列可以嵌套行,行再包含列
<div class="container>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
</div>