bootstrap栅格系统以及常见样式和响应式工具

最新推荐文章于 2020-10-06 18:51:31 发布

#%^*$&

最新推荐文章于 2020-10-06 18:51:31 发布

阅读量513

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/fyj___/article/details/108432158

版权

本文介绍了Bootstrap的核心文件引入，详细讲解了其响应式的栅格系统，包括不同屏幕尺寸下的列布局以及如何创建响应式行。此外，还讨论了表格与按钮样式、表单元素的使用以及辅助类和响应式工具，这些工具允许根据屏幕大小显示或隐藏内容。

摘要由CSDN通过智能技术生成

Bootstrap核心文件引入

<!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页面</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>你好，世界！</h1>
<p>这是我的第一个bootstrap页面</p>
<p>
<button class="btn btn-primary btnlarge">了解更多</button>
</p>
</div>
</di>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖
jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要
只加载单个插件。 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或可视化窗口（viewport）尺寸的增加，系统会自动分为最多12列。

布局容器

<!--固定宽度-->
<div class="container"

最低0.47元/天解锁文章

#%^*$&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap栅格系统以及常见样式和响应式工具

Bootstrap核心文件引入<!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个met
复制链接

扫一扫