Bootstrap3引入相关知识点

Bootstrap3官网地址

1. Bootstrap依赖于jquey必须在之前引入。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

2. 引入核心css和核心js

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

3. 也可以下载到本地

下载地址： https://github.com/twbs/bootstrap/archive/v3.3.7.zip

下载成功后打开文件找到 dist 文件夹

然后把整个文件夹放到你的项目下

也可以只复制一部分。把必要的标注下

字体文件是必须的，如果不放里会因为字体丢失，导致某些图标不显示。控制台报错。

4.meta 标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

最后测试下是否引入成功

目录结构

index.html 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"/><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script src="../public/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container"><button type="button" class="btn btn-success" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
</div>
</body>
</html>

实际效果

证明引入成功。可以放心使用了

Bootstrap3引入相关知识点相关推荐

2、MyEclipse和Eclipse调优，MyEclipse配置(tomcat和jdk的内存设置)，jar引入相关知识点,将Java项目编程web项目的办法
1.WindowàPreferenceàGeneralàWorkspaceàText file encoding都改成UTF-8 2.WindowàPreferenceàGeneralàEdito ...
并发与多线程相关知识点梳理
文章目录并发和并行的概念如何保证线程安全 1. 数据单线程内可见 2. 只读对象 3. 线程安全类 4. 同步与锁机制什么是锁线程同步引用类型 ThreadLocal LeetCode 相关 ...
ArrayList源码解析与相关知识点
ArrayList源码解析于相关知识点(超级详细) 文章目录 ArrayList源码解析于相关知识点(超级详细) ArrayList的继承关系 Serializable标记接口 Cloneable标记 ...
VSLAM 相关知识点总结
VSLAM 相关知识点这篇文章是对VSLAM涉及的知识点进行系统性的总结和更新,一些内容来源至VSLAM经典教材,博客,和开源项目(引用材料如下表) SLAM十四讲高博古月老师的技术博客崔神的g ...
HTML相关知识点总结
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 目录简介 HTML文档 ...
Redis 相关知识点
Redis 相关知识点概述为什么要用缓存为什么用redis 用redis缓存了哪些东西单线程redis为什么这么快 redis的数据类型和使用场景 redis 的过期策略都有哪些?内存淘汰机制 ...
redis相关知识点讲解，redis面试题
redis相关知识点讲解,redis面试题 1. redis基本知识点 1.1 什么是redis? 1.2 redis的key的设计 1.3 redis的value数据类型有哪些? 1.3.1 str ...
Java虚拟机垃圾回收相关知识点全梳理（下）
2019独角兽企业重金招聘Python工程师标准>>> 一.前言上一篇文章<Java虚拟机垃圾回收相关知识点全梳理(上)>我整理分享了JVM运行时数据区域的划分,垃圾判 ...
卫星轨道推演计算相关知识点总结（含欧拉角、旋转矩阵、及各坐标系转化等）
来源:轨道机动算法的C++实现_shirro123的专栏-CSDN博客卫星轨道推演计算相关基础知识点总结一.卫星的运动特性二.卫星的空间坐标系 ...
水下机器人_相关知识点
485转232 SP3485的管脚及功能: Pin1.RO 接收器输出 Pin2.RE 接收器输出使能(低电平有效) Pin3.DE 驱动器输出使能(高电平有效) Pin4.DI 驱动器输入 P ...

Bootstrap3引入相关知识点

Bootstrap3引入相关知识点相关推荐

最新文章

热门文章