Bootstrap环境引入

最新推荐文章于 2024-05-27 10:11:34 发布
最新推荐文章于 2024-05-27 10:11:34 发布
阅读量1k 收藏 1
点赞数
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34505594/article/details/79515638
版权

1.下载网址：https://v3.bootcss.com/，下载用于产生环境的bootstrap。

2.环境引入

方法一：在联网的状态下直接在<head></head>之间写入代码；

注意：文档必须为html5

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

方法二：在网站下载bootstrap，https://v3.bootcss.com/getting-started/#download

解压后包含front，css，js三个文件夹，js文件中必须有jquery.min.js文件，打开cdn.bootcss.com/jquery/1.11.3/jquery.min.js网址，网页另存为到js文件夹中。Link是引入外部样式表，在<head></head>之间写代码

<!--引入外部bootstrap中的css文件-->
<link rel=”stylesheet” herf=”bootstrap/css/bootstrap.min.css”>
<!--jQuery 引入，务必在bootstrap.min.js之前引入-->
<script src=”bootstrap/js/jquery.min.js”></script>
<!--再引入bootstrap.min.js文件-->
<script src=”bootstrap/js/bootstrap.min.js”></script>

或者

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


qq_34505594
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
项目引入Bootstrap没有起作用
weixin_42895133的博客
02-05 3544
<head> <title>员工信息</title> <% pageContext.setAttribute("APP_PATH",request.getContextPath()); %> <!-- Bootstrap --> <link rel="stylesheet" href="${APP_...
引入bootstrap环境
11-14
本教程将详细讲解如何在您的项目中引入Bootstrap环境，帮助您轻松实现美观且功能强大的网页设计。 首先，我们需要了解Bootstrap的基本构成。Bootstrap主要包括以下三个核心部分： 1. **CSS**：Bootstrap的CSS文件...
Bootstrap导入JavaScript插件
weixin_34205826的博客
11-28 247
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap 3.x 版本基础引入指南
最新发布
一起coding，一起嗨。
05-27 515
Bootstrap 3.x 版本基础引入指南
BootStrap引入
more time
05-09 276
只需要head元素内加入<head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.4/js/bootst
三. 环境搭建之bootstrap的引入
qq_43264453的博客
04-07 4233
一 bootstrap介绍 bootstrap是一款前端框架，可以用来快速开发静态网页，如果我们一些样式等都从0写起就太费时间了，所以这款框架给我们提供了很多强大的功能。 二 下载 首先百度直接搜索bootstrap，进入官网，点击中文文档 再点击下载，进入下载界面 下载还好可以看到这些文件夹： 里面都是它的样式、字体等。 三 导入idea 在文件结构 webapp下新建一个static包，将刚刚解压好的文件放进即可。 然后我们来测试一下怎么使用： 在webapp下新建一个jsp文件，并且在stati
Bootstrap引入和使用
AZURE060606的博客
02-26 2378
Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求v3官方文档库：官方书写好了大量现成的CSS样式以及组件。
Bootstrap学习笔记之环境配置(1)
09-01
以下是关于Bootstrap环境配置的一些详细知识。 0x01 Bootstrap结构 Bootstrap的预编译版本通常包含以下三个主要目录： 1. css: 包含Bootstrap的样式文件，如`bootstrap.min.css`，用于应用框架的样式。 2. js: 包含...
bootstrap环境配置文件
11-01
在这个名为“bootstrap环境配置文件”的资源包中，包含了搭建Bootstrap环境所需的关键文件，特别是与jQuery库的集成，使得动态交互功能更加便捷。 首先，让我们深入了解一下jQuery。jQuery是一个轻量级的JavaScript...
Bootstrap环境搭建，简单配置。
03-17
在本教程中，我们将探讨如何搭建一个基础的Bootstrap环境，并进行简单配置。 首先，理解Bootstrap的核心概念是至关重要的。Bootstrap基于HTML、CSS和JavaScript，其设计目标是提供美观、一致且易于使用的组件，适用...
bootstrap开发环境
04-23
这个"bootstrap开发环境"可能包含了一整套搭建和使用Bootstrap进行开发所需的资源和工具。下面我们将深入探讨Bootstrap的核心概念、开发环境的搭建以及如何有效地使用它。 Bootstrap的核心组件包括：CSS样式、...
bootstrap的switch控件需要引入的js和css文件
10-17
bootstrap的switch控件需要引入的js和css文件，自己整理的！
Bootstrap引入（导入）
weixin_44293582的博客
11-07 3324
导入Bootstrap的方法： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script> <script type="text/javascript
1. 引入Bootstrap文件
淡泊以明志，宁静以致远
01-12 1129
Bootstrap不是一门语言只是一个框架（中文官网下载：www.bootcss.com） Bootstrap包括以下组件： 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等 引入bootstrap和jQuery文件 <!DOCTYPE html> <html> <head>...
在项目中引入BootStrap框架
进击的猪小Q
04-14 3550
1.配置过程： （1）登录www.bootcss.com网站，下载bootStrap框架（选择用于生产环境的bootStrap） （2）打开下载好的文件夹找到dist文件夹，打开看到有css,fonts和js三个文件夹。将其粘贴并复制到你的项目下。 （3）直接引入 （4）注意修改相应的目录 （5）使用bootstrap必须建立在jQuery（直接引入即可）的基础上； （6）修改js的路径： 2.BootStrap栅格系统 （1）描述：栅格系统（gri...
Bootstrap导入
qq_37901755的博客
01-04 1672
利用Bootstrap直接导入CSS js 等模板文件避免一些繁琐的框架设计 参考别人的博客https://blog.csdn.net/mind_programmonkey/article/details/77009116进行做 这里bootstrap的官方英文网站不知道为啥就只有Css 和js文件 我是搜索bootstrap中文社区找到和博主一样的 偷懒也是由于没有时间和精力学习html和css...
[bootstrap] 在html中引入bootstrap
GYK0812的博客
10-06 1509
1. 引入bootstrap样式表 2. 引入jquery 3. 引入bootstrap自身的 .js文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1-3 引入b.
【前端】怎么引入bootstrap框架
热门推荐
想和派大星一样
02-15 1万+
1、从bootstrap网站上下载bootstrap的文件包2、引入bootstrap包，以及jquery.js3、在html（或者其他动态页面）页面中引入所需的css和js4、引入完成之后，就可以测试是否可以正常使用bootstrap中的组件了...
前端笔记-vue中引入Bootstrap
IT1995的博客
08-01 6360
目录 过程演示 源码打包下载 过程演示 首先在项目中导入插件： npm install jquery --save npm install bootstrap --save npm install popper.js --save 程序结构如下： index.js中添加如下代码 import '../../node_modules/bootstrap/dist/css...
bootstrap环境搭建
09-06
要搭建一个Bootstrap环境，你可以按照以下步骤进行操作： 1. 首先，确保你的项目中已经包含了最新版本的Bootstrap文件。你可以通过下载Bootstrap的压缩包或使用CDN链接来获取最新版本的文件。 2. 将Bootstrap的CSS和JavaScript文件引入到你的项目中。可以将它们直接下载到你的项目文件夹中，并在HTML文件中使用`<link>`和`<script>`标签引入，或者使用CDN链接。 ```html <!-- 引入Bootstrap的CSS文件 --> <link rel="stylesheet" href="path/to/bootstrap.min.css"> <!-- 引入Bootstrap的JS文件 --> <script src="path/to/bootstrap.min.js"></script> ``` 3. 在HTML文件中添加必要的HTML结构。Bootstrap提供了许多组件和样式类，你可以根据自己的需求来选择使用哪些组件和样式类。 ```html <!-- 示例：一个基本的Bootstrap网格系统布局 --> <div class="container"> <div class="row"> <div class="col-md-6"> <!-- 左侧内容 --> </div> <div class="col-md-6"> <!-- 右侧内容 --> </div> </div> </div> ``` 4. 根据需要，使用Bootstrap提供的类来样式化你的内容和布局。你可以参考Bootstrap官方文档以获取更详细的信息和示例。 以上是一个基本的Bootstrap环境搭建过程。你可以根据具体的项目需求来选择使用哪些组件和样式类，并按照相应的方式进行配置和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值