位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > 创建第一个 Bootstrap 4 页面
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Bootstrap4 安装使用 下一篇: Bootstrap4 网格系统

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型,所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档小白教程网头部声明,并设置对应编码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
</html>
移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

l  width=device-width 表示宽度是设备屏幕的宽度。

l  initial-scale=1 表示初始的缩放比例。

l  shrink-to-fit=no 自动适应手机屏幕的宽度。

 

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类:

l  .container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器

image.png

Bootstrap4 .container 实例

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>这是一些文本。</p>
</div>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

Bootstrap4 .container-fluid 实例

以下实例展示了占据全部视口(viewport)的容器。

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div>
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>使用了 .container-fluid,100% 宽度,占据全部视口(viewport)的容器。</p>
</div>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

上一篇: Bootstrap4 安装使用 下一篇: Bootstrap4 网格系统
毕业设计网             广告联系QQ:45157718(微信同号)