Bootstrap——环境安装以及概览

Bootstrap官方地址,可以查看教程,下载文档。当前主流的还是3.x版本,4.x虽然能用但是还不太完善。
CDN引用

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 3.x 版本-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

概览

  • 在3.x以及以上的版本中,Bootstrap 是移动设备优先的。它无需引用额外文件为了确保适当的绘制和触屏缩放,需要在<head>之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。
<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
<div class="container">
  ...
</div>
<!--.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。-->
<div class="container-fluid">
  ...
</div>
发布了12 篇原创文章 · 获赞 5 · 访问量 644

猜你喜欢

转载自blog.csdn.net/qq_44091773/article/details/104675519