如何使用Bootstrap

FangYaQ

于 2018-12-05 09:55:39 发布

阅读量251

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 响应式布局流式布局移动端布局

本文链接：https://blog.youkuaiyun.com/weixin_43486035/article/details/84819827

版权

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于Bootstrap框架的基本模板，详细展示了如何引入Bootstrap及相关依赖，包括响应式布局、栅格系统及流式布局容器的使用。同时，文章还涵盖了对于不同浏览器版本的支持策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.基本模板

注意文件引入路径，根据需求选择相应布局及样式
https://v3.bootcss.com 文档及下载

<!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, user-scalable=0">
   <title>Bootstrap 101 Template</title>
   <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
   <!--[if lt IE 9]>
   <script src="../lib/html5shiv/html5shiv.min.js"></script>
   <script src="../lib/respond/respond.min.js"></script>
   <![endif]-->
</head>
<body>
<!--响应式布局容器，功能同媒体查询-->
<div class="container">
   <!--栅格系统-->
   <div class="row">
   	<div class="col-lg-4"></div>
   </div>
</div>
<!--流式布局容器-->
<div class="container-fluid">
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>