简介
- 布局响应式框架
- 一个前端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>