web前端：BootStrap

最新推荐文章于 2024-02-09 12:00:00 发布

JinChao94

最新推荐文章于 2024-02-09 12:00:00 发布

阅读量194

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/JinChao94/article/details/103407910

版权

前端开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

Bootstrap ：一个用于快速开发 Web前端框架。基于 HTML、CSS、JavaScript

优点：丰富的CSS样式和JS插件；响应式布局（同一页面兼容不同分辨率的设备）

基本代码

<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 Hello，World ！</title>

	<!-- 加载 Bootstrap CSS样式 -->
	<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>hello，world！</h1>

</body>
</html>

响应式布局

实现原理：栅格系统，每一行分为12个格子，指定元素占几个格子

实现步骤：

1.定义容器：container：两边留白 container-fluid：每一种设备都是100%宽度
2.定义行：样式：row div
3.定义元素：指定元素占几个格子，向上兼容样式：col-设备代号-格子数目
- 设备代号：
  - 1. xs：超小屏幕手机 (<768px)：col-xs-12
  - 2. sm：小屏幕平板 (≥768px)
  - 3. md：中等屏幕桌面显示器 (≥992px)
  - 4. lg：大屏幕大桌面显示器 (≥1200px)