Bootstrap教程(2)--安装Bootstrap

简介: 本文目录1. 版本选择2. 使用方式3. 安装方法4. 验证下

1. 版本选择

目前已经出了Bootstrap4,但是作为初学者而言可以学习Bootstrap3,更加主流的版本选择,网上的文档、教程、资源也相对比较多。本教程选择Bootstrap3.3.7。


2. 使用方式

可以将Bootstrap下载到本地后引入使用,也可以直接使用CDN引入使用。


CDN方式的话不如下载到本地使用稳定,但是不用下载更加的方便,学习阶段可以直接使用CDN的方式。


本教程直接使用CDN方式。


3. 安装方法

由于Bootstrap依赖于jQuery,所以我们先行引入jQuery,然后引入Bootstrap相关的文件。


<html>


<head>

   <title>boostrap-setup</title>

   <meta charset="utf-8">

   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

   <!-- 引入jQuery -->

   <script src=" https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

   <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</head>


<body></body>


</html>


如上,在head区域引入相关的文件后,即可直接使用Bootstrap了。


4. 验证下

我们在内容区域放置2个按钮,一个是普通按钮,一个是采用了Bootstrap样式的按钮,代码如下:


<body>

   <button type="button">Button</button>

   <button class="btn btn-primary" type="button">Button</button>

</body>


效果如下:

image.png

非常明显,使用了Bootstrap样式的按钮比普通按钮好看多了。


相关文章
|
开发框架 前端开发 JavaScript
|
9月前
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
|
6月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
9月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
9月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
|
9月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
9月前
|
前端开发
Bootstrap 5 保姆级教程(七):分页 & 列表组
Bootstrap 5 保姆级教程(七):分页 & 列表组
|
9月前
|
前端开发
Bootstrap 5 保姆级教程(六):进度条 & 加载效果
Bootstrap 5 保姆级教程(六):进度条 & 加载效果
|
9月前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
9月前
|
前端开发 容器
Bootstrap 5 保姆级教程(一):容器 & 网格系统
Bootstrap 5 保姆级教程(一):容器 & 网格系统