学习笔记-BootStrap

最新推荐文章于 2023-06-04 10:21:53 发布

niefengqi

最新推荐文章于 2023-06-04 10:21:53 发布

阅读量215

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_45088440/article/details/95865494

版权

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

概念：一个前端开发的框架
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷

好处：定义了很多css样式和js插件，可以直接使用这些样式和插件得到丰富的页面效果；响应式布局

快速入门：
1.下载BootStrap bootstrap-3.3.7-dist
2.复制这三个文件夹到项目中 css、fonts、js
3.创建html页面引入必要的资源文件

例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

</head>
<body>
<h1>你好，世界！</h1>


</body>
</html>

响应式布局

同一套页面可以兼容不同分辨率的设备
实现：依赖栅格系统
步骤：
1.定义容器（相当于之前的table）
分类：
container：两边留白
container-fluid：每一种设备都是100%宽度
2.定义行（相当于之前的tr），样式：row
3.定义元素，指定元素在不同的设备上所占的格子数，样式：col-设备代号-格子数目
设备分类：
xs（超小屏幕手机 <768px）:col-xs-格子数目
sm(小屏幕平板 >= 768px) :col-sm格子数目
md（中等屏幕桌面显示器 >=992px）：col-md-格子数目
lg（大屏幕大桌面显示器 >=1200px）：col-lg-格子数目

注意：