Bootstrap 的基本实现
2024-09-04 08:50:11
bootstrap: UI插件 YUI, ElementUI
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
响应式布局: 根据屏幕大小,自适应页面的布局
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
导包
第一种：本地使用
- 搜索Bootstrap官网
- 点击下载Bootstrap
- 在你项目导入 bootsrap压缩文件中dist目录下css/bootsrap.css（css） fonts （字体） js/bootstrap.js（js）
- 选择需要导入的包（必须先导入jquery.js，再导入bootsrap.js）
- 引入bootstrap.css <link type="text/css" rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.css">
- 引入jquery.js: 使用jquery1.10以上 <script src="./jquery/jquery.js"></script>
- 引入bootsrap.js文件 <script src="./bootstrap-3.3.7/dist/js/bootstrap.js"></script>
第二种：外部使用
复制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
最新文章
- asp.net开发中常见公共捕获异常方式总结(附源码)
- SQL Server 查询时间段内数据
- 第五篇、常用的SQL语句和函数介绍
- CheckStyle插件
- 五年26个版本：Linux系统内核全程回顾
- 从源代码角度分析ViewStub 疑问与原理
- MAMP、wordpress安装
- HMM的概率计算问题和预测问题的java实现
- 2015阿里巴巴安全峰会PPT
- Postgres的tuple的组装
- 408 JavaScript 变量、数据类型、正则
- 安装Percona版本的MySQL主从复制
- Unity的Input输入
- STL容器底层数据结构的实现
- 电容充放电时间常数RC计算方法
- Centos crontab定时任务
- IT部门的“2/8”现状
- Android画图之抗锯齿 paint 和 Canvas 两种方式
- iptables与SELinux
- Tomcat启动 Unable to process Jar entry [javassist/XXXXXX.class]