Bootstrap 的基本实现

bootstrap:   UI插件  YUI,  ElementUI

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

响应式布局:  根据屏幕大小,自适应页面的布局

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单

导包

第一种:本地使用

  1. 搜索Bootstrap官网
  2. 点击下载Bootstrap
  3. 在你项目导入 bootsrap压缩文件中dist目录下css/bootsrap.css(css)   fonts (字体)  js/bootstrap.js(js)
    • 选择需要导入的包(必须先导入jquery.js,再导入bootsrap.js)

第二种:外部使用

  复制Bootstrap官网

  • <!-- 1、最新版本的 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">
  • <!-- 2、引入jquery.js -->
  • <!-- 3、最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

栅格系统

bootstrap 其实 是把 网页等 分为 了 12分,bootstrap把 根据屏幕大小把屏幕分 为了 4个层级

超小屏幕 手机 (<768px) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面显示器 (≥992px) .col-md-
大屏幕 大桌面显示器 (≥1200px) .col-lg-

详情请看官网https://v3.bootcss.com/css/#grid

原文地址:https://www.cnblogs.com/64Byte/p/12642686.html