当前位置:我爱自学网 > HTML/CSS > Bootstrap 教程 > Bootstrap4 教程 > 访问量:

Bootstrap4 教程

 Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

谁适合阅读本教程?

只要您具备 HTML 和 CSS 的基础知识,您就可以阅读本教程,进而开发出自己的网站。在您学习完本教程后,您即可达到使用 Bootstrap 开发 Web 项目的中等水平。

阅读本教程前,您需要了解的知识:

在您开始阅读本教程之前,您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念,那么建议您先阅读我们的这些教程: Bootstrap4 与 Bootstrap3的区别
Bootstrap4 是 Bootstrap 的最新版本,与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。
Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器,那么请使用 Bootstrap3。
有关 Bootstrap 3 的使用,请参考本站的《Bootstrap3教程》!

Bootstrap4 实例

 <!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 class="jumbotron text-center">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>重置浏览器大小查看效果!</p> 
</div>
 
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p>我爱自学网—5azixuewang.com</p>
      <p></p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p>我爱自学网—5azixuewang.com</p>
      <p>我爱自学网—5azixuewang.com!</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3> 
      <p>我爱自学网—5azixuewang.com</p>
      <p>我爱自学网—5azixuewang.com</p>
    </div>
  </div>
</div>
 
</body>
</html>
本章内容:
1.Bootstrap4 安装使用
2.Bootstrap4 网格系统
3.Bootstrap4 文字排版
4.Bootstrap4 颜色
5.Bootstrap4 表格
6.Bootstrap4 图像形状
7.Bootstrap4 Jumbotron
8.Bootstrap4 信息提示框
9.Bootstrap4 按钮
10.Bootstrap4 按钮组
11.Bootstrap4 徽章(Badges)
12.Bootstrap4 进度条
13.Bootstrap4 分页
14.Bootstrap4 列表组
15.Bootstrap4 卡片
16.Bootstrap4 下拉菜单
17.Bootstrap4 折叠
18.Bootstrap4 导航
19.Bootstrap4 导航栏
20.Bootstrap4 面包屑导航(Breadcrumb)
21.Bootstrap4 表单
22.Bootstrap4 表单控件
23.Bootstrap4 输入框组
24.Bootstrap4 自定义表单
25.Bootstrap4 轮播
26.Bootstrap4 模态框
27.Bootstrap4 提示框
28.Bootstrap4 弹出框
29.Bootstrap 滚动监听(Scrollspy)
30.Bootstrap4 小工具
31.Bootstrap 4 Flex(弹性)布局
32.Bootstrap 4 多媒体对象
33.Bootstrap4 创建一个网页