BootStrap 引用模板

于 2020-02-20 16:41:21 发布 511 收藏 1
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967603/article/details/104407014
版权

中文官网：bootstrap.com
bootstrap 是什么：
  Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。(就是帮你写好css,甚至写好一些JavaScript,直接通过类名引用就好)

安装

 通过 npm 安装

$ npm install bootstrap

 CDN

  如果你只是需要使用 Bootstrap 的预编译 CSS 或 JS 文件，你可以直接使用 BootstrapCDN。
bootstrap4 基本模板 ↓↓↓

<!-- Bootstrap 要求使用 HTML5 doctype。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。 -->
<!doctype html>
<html lang="zh-cn">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- width=device-width 表示宽度是设备屏幕的宽度。
		 initial-scale=1 表示初始的缩放比例。
		 shrink-to-fit=no 自动适应手机屏幕的宽度。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

bootstrap3 基本模板 ↓↓↓

<!-- Bootstrap 要求使用 HTML5 doctype。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。 -->
<!doctype html>
<html lang="zh-cn">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- width=device-width 表示宽度是设备屏幕的宽度。
		 initial-scale=1 表示初始的缩放比例。
		 shrink-to-fit=no 自动适应手机屏幕的宽度。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
LeungZhenPang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
史上最经典的Bootstrap前台模板
10-18
史上最经典的Bootstrap前台模板，大图轮播、仿京东商城，白色主题、高端大气。
bootstrap第一章：bootstrap介绍
最新发布
qq_62244121的博客
09-29 150
bootstrap简介，CDN，模板
Bootstrap的完整模板
qq_33243148的博客
02-13 759
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!--声明文档兼容模式，表示使用IE浏览器的最新模式--&gt; &lt;meta http-equiv="X-UA-Compatible" content=
Vue学习笔记 —— 路径引入
weixin_43340295的博客
10-21 264
前言 在html文件中，通过script标签来引入js，而在vue文件中通过import方式导入文件。并且import不止是可以导入js文件。 例：import HelloWorld from './components/HelloWorld.vue' 'HelloWorld'：指的是为导入文件气的一个名称，不是指导入文件的名称，相当于变量名 './components/HelloWorld.vue'：指的是文件的相对路径 引入路径的方式 以父子目录的方式定义相对路径： ./ 指当前目录 ..
bootstrap后台模板_Bootstrap使用简介（一）
weixin_39949776的博客
11-19 551
网址:Bootstrap中文网 1.1 框架 我们使用提供的模板或者内容 基础上去开发自己的内容 快速 高效的开发代码 1.2 Bootstrap响应式框架 响应式：实现一个页面（url）适配各个终端 写一个网页 预览这个网页的时候 会根据不同的分辨率 设置看到同一个网页 只是网页布局不同 ...
bootstrap使用模板
weixin_34290390的博客
11-12 140
Bootstrap下载地址: - https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip- https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.z...
个人整理的免费的Bootstrap模板
m0_69214212的博客
04-06 4553
原文发布在 不二博客 Dash UI Dash-UI 是 Bootstrap 5 管理和仪表板主题。 Dash UI Kit 一个完全使用 Bootstrap 5 编码的免费和开源组件和模板工具包。 GitHub 地址：https://github.com/codescandy/Dash-UI 官网：https://dashui.codescandy.com 演示地址：https://codescandy.com/dashui/index.html volt-bootstrap-5-dashboard.
bootstrap轮播图不起作用
Alan的博客
11-24 3105
在<head></head> 添加如下语句 <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 s...
8款超棒的Bootstrap前端模板
热门推荐
菲宇运维
06-24 5万+
第一款：SB Admin 2官方：http://startbootstrap.com/template-overviews/sb-admin-2/第二款：Admin Lite官网：https://shapebootstrap.net/items/category/html-templates/11-admin-templates第三款：Director Responsive Admin Templ...
Bootstrap简单引用
林高禄
06-30 1万+
概念 基于html,css,javaScript的前端开发框架，简洁灵活，使得web开发更为方便 下载 https://www.bootcss.com/ 使用 1、引用文件包 将这三个文件复制到项目中 2、创建html文件，引入必要的资源文件 打开这个链接https://v3.bootcss.com/getting-started/ 或者有离线文档的，也可以打开文档 单击起步，然后往下拉到基本模板 复制...
Bootstrap基本模板
qq_43408070的博客
11-20 1096
下面展示一些 内联代码片。 // A code block var foo = 'bar'; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
bootstrap的Hello World
weixin_34122604的博客
02-14 152
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"...
bootstrap 引用+基本模板
weixin_43768963的博客
03-06 163
基本模板 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...
Bootstrap 引用的标准模板
weixin_30814329的博客
06-13 47
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie...
Bootstrap4代码模板
没得简介
09-06 399
直接上代码: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--为了保证在移动端能够正常显示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi
使用Bootstrap模板布局-1
wtt234的专栏
05-07 330
1.下面是模板； 重点关注栅格布局； 模板布局的内容： bootstrap中调用的内容，重点强调的是 bootstrap外还有引用jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入BootStrap的样式，提供了大量的样式--> .
微信公众号开发-开发后台设计
07-19
《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一，这套视频教程，使用响应式网站的模式，帮你设计好开发后台，让你在后续的微信公众号开发中更高效。欢迎反馈，QQ/微信：68183131
认识Bootstrap与引用
weixin_52120405的博客
05-28 277
1.官网：Bootstrap中文网 (bootcss.com) 2.BS是一个入门级UI框架，汇集了HTML、CSS（less）（布局）和JavaScript（插件）的一个框架。 3.BS不是所有项目都适合使用BS实现布局，如果UI工程师没有按照BS的栅格系统理念去设计UI图，因为BS不适合做固定宽高的网页。 BS一般用于开发没有UI图的项目，且为响应式的项目。 4.BS3和BS4的区别： BS3有4种栅格，而BS4有5种栅格； BS4全面引入ES6，...
bootstrap4 后台管理模板_后台管理系统，前端框架【产品经理原型设计参考资料】...
weixin_30120049的博客
12-25 1086
前言：前些日子，我在课后，跟学员沟通的时候发现。很多小伙伴，在设计后台管理系统的时候，没思路(需求都清楚，就是不知道怎么将一大堆功能，进行合理的布局和排版，说白了就是不知道怎么设计，画原型没思路)其实这个问题，超简单，有技术背景的童鞋，肯定都知道，这个世界上，有前端框架这种神奇的存在，前端框架，就是所谓的 “模板”，这个模板，不仅对前端开发有着巨大的好处，对于咱们产品经理来说，用处也是嗷...
【网页模板】Bootstrap免费模板
程序蚁的博客
06-14 1万+
Bootstrap是目前最受欢迎也是最简洁的建站方式之一，尤其是伴随移动端的发展，响应式设计已经毫无疑问成为了网页设计的趋势，网站建设要求兼容手机端已经是一种刚需，也成为提升用户体验的一种必要方式。但这无疑会加大设计师和前端人员的工作量，基于这样的情况，为了最大程度的节约成本，选择使用响应式的前端框架网站模板越来越受欢迎。 1. Coming Soon Coming Soon是一个Bootstra...
bootstrap开源的后台管理系统模板
寂寥人生
06-18 4164
AdminLTE https://github.com/ColorlibHQ/AdminLTE sb-admin https://github.com/StartBootstrap/startbootstrap-sb-admin sb-admin-2 https://github.com/StartBootstrap/startbootstrap-sb-admin-2 stisla https://github.com/stisla/stisla ace https://github.com/bop

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题：技术工厂 设计师：CSDN官方博客 返回首页
评论

打赏作者

LeungZhenPang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值