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样式的按钮比普通按钮好看多了。


相关文章
|
6月前
|
开发框架 前端开发 JavaScript
|
8月前
|
存储 编解码 前端开发
W3Cschool编程实战教程中BootStrap相关基础知识点总结
1、通过Bootstrap,我们只要给图片添加 img-responsive 的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。
38 0
|
4月前
|
编解码 前端开发 JavaScript
BootStrap 响应式布局技术教程简介
BootStrap 响应式布局技术教程简介
76 1
|
5月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
78 0
|
8月前
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
92 0
|
前端开发 Android开发
MAC安装Eclipse出错:Executing bootstrap tasks
MAC安装Eclipse出错:Executing bootstrap tasks
80 0
|
JSON JavaScript 前端开发
bootstrap3-typeahead 自动补全完美使用教程
displayText:直接说就是一个 function,默认为 item.name || item(用于获取从 Source 中得到的信息在字面上显示的内容,这个里面的值如果是有 item.name 属性就显示name属性,如果没有就直接显示 item ),回到Source描述中的 an array of JSON object..... 如果数组里面的数据时一个json,那么这个json必须有一个name属性,所以这个属性完全可以不叫name,甚至可以自己写一个function用于显示displayText
308 0
bootstrap3-typeahead 自动补全完美使用教程
|
前端开发 JavaScript
Bootstrap2【上手教程】
Bootstrap2【上手教程】
Bootstrap2【上手教程】