如何导入bootstrap以及使用栅格系统的注意点

如何导入bootstrap以及使用栅格系统的注意点

前言：bootstarp目前可能因为版本的原因，可能实用度并不是太高，但是现在作为一个前端开发人员，还是需要了解bootstrap的导入使用方式。

第一种、线上导入

首先进入bootstrap的官网 然后点击中文文档，会有简单的介绍 然后下面我直接贴出线上导入的代码

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

注意：这个没有想象的复杂，主要是要注意观察中文官网，知道每个类名是干什么的？ 每个属性的作用是什么？属性值有哪些？用什么，找什么。

第二种，本地导入

本地导入就更加简单了，去到官网直接下载他的源码

然后就在需要使用的时候直接使用link标签导入。

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<script src="./bootstrap/js/bootstrap.js"></script>

注意：在导入的时候，注意导入的文件路径是否正确哦！

我是一个分割线啦啦啦啦啦啦啦啦啦啦————————————————————————————————————————————————————————

bootstrap的栅格系统的使用

简单介绍一下栅格系统

• 栅格系统
• 默认将每一个容器等分为12份
  • 然后用 .col-xx 来区分显示器
  • col-xxx-3（3是指在12份中占据3份） 设置子元素 在12份当中占据几份
• 总结：
• .col-xx-n 表示在某个显示器中 子元素占据12份中的n份
• .col-xs-12 在移动端所占据的份数

怎么用

• 确定在什么端 实现什么布局：pc端（.col-cm） 移动端（.col-xs 或者 .col-sm 或者.col-lg）
• 确定一行排几个（n） 2.3.4.6.1
• 设置子元素宽度 12/n（子元素在父元素所占宽度的比例 不包含padding） 注意拉开子元素距离不能用margin（会使盒子变大） 要用padding
• n 为特殊值 不能被12整除 用其他方法 不使用栅格系统

大概内容就是这样的啦！