BootStrap框架的下载与使用

简介

• 布局响应式框架
• 一个前端UI框架,提供了大量css,以及html与js
• 中文官网地址:

使用步骤

下载

• 下载地址:https://www.bootcss.com/
• 首页➡BootStrap3中文文档➡下载BootStrap8
  

使用步骤

• link标签引入 使用class调用

  <!-- 两种都可以 -->
    <!-- <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css"> -->
    <!-- 压缩的 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

//调用
<div class="container">1</div>

栅格系统

• 栅格化是指将整个网页的宽度平均分成若干个等份
• BootStrap3默认将网页分成12份
• 类前缀名
  超小屏幕(col-xs-) 小屏幕(col-sm-) 中等屏幕(col-md-) 大屏幕(col-lg-)
  版心类名 container
  
  清除左右内边距15px row (自带左右间距-15px)
  

辅助类名

• pull-right : 强制元素右浮动
• pull-left : 强制元素左浮动
• clearfix : 清除浮动元素的影响
• text-left文 : 本左对齐
• text-right : 文本右对齐
• text-center : 文本居中对齐
• center-block : 块元素居中

响应式工具

• 布局类 不同屏幕尺寸隐藏或显示页面内容
  

插件的使用

• 第一步 引入BootStrap样式
• 第二步 引入js文件：jQuery.js + BootStrap.min.js

 	<!-- css部分 第一步 引入bootstrap样式 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
      <!-- js部分先引jquery -->
      <script src="./js/jquery.js"></script>
      <!-- 再引框架js -->
      <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>