【Bootstrap】bootstrap快速入门
2024-05-11 05:19:15
下载：
安装后：有3个文件夹：
css，字体，js
jQuery需要自己下载
********
新建一个文件：
成功。
第一个bootstrap文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body><button class="btn btn-info">Hello World!!!Hello Yukky!Hello Bootstrap!</button>
</body>
</html>效果：
*******************
bootstrap中的全局样式
排版-标题：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body><h1>标题一，观察大小变化<small>小标题</small></h1><h2>标题一，观察大小变化<small>小标题</small></h2><h3>标题一，观察大小变化<small>小标题</small></h3><h4>标题一，观察大小变化<small>小标题</small></h4><h5>标题一，观察大小变化<small>小标题</small></h5><h6>标题一，观察大小变化<small>小标题</small></h6><hr/><p class="h1">标题一，观察大小变化</p><p class="h2">标题一，观察大小变化</p><p class="h3">标题一，观察大小变化</p><p class="h4">标题一，观察大小变化</p><p class="h5">标题一，观察大小变化</p><p class="h6">标题一，观察大小变化</p>
</body>
</html>效果：
排版-文本：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
</head>
<body><p><mark>登鹳雀楼</mark>登鹳雀楼</p><p><del>唐代诗人：</del></p><p><ins>王之涣</ins></p><p><u>白日依山尽，</u><small>黄河入海流。</small></p><p>欲穷千里目，<strong>更上一层楼。</strong></p><p>登鹳雀楼唐代：王之涣白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</p><p class="text-left">更上一层楼</p><p class="text-center">更上一层楼</p><p class="text-right">更上一层楼</p><p class="text-lowercase">HELLO!本来是大写</p><p class="text-uppercase">hello!本来是小写</p><p class="text-capitalize">把hello第一个字母大写</p>
</body>
</html>效果：
排版-表格：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
</head>
<body><table class="table table-striped table-bordered table-hover"><thead><tr><th>标题一</th><th>标题二</th><th>标题三</th><th>标题四</th><th>标题五</th></tr></thead><tbody><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr><tr class="active"><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr><tr class="success"><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr><tr class="info"><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr><tr class="waring"><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr><tr class="danger"><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr></tbody></table>
</body>
</html>效果：
*************
表单：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
</head>
<body><form class="form-inline"><div class="form-group form-success"><label for="">这是一个输入框：</label><input type="text" class="form-control input-lg " placeholder="这是一个输入框："/></div><div class="form-group has-warning"><label class="control-label" for="">这是一个输入框：</label><select class="form-control"><option value="">北京</option><option value="">北京</option><option value="">北京</option><option value="">北京</option><option value="">北京</option></select></div><div class="form-group has-error"><label class="control-label" for="">这是一个输入框：</label><textarea name="" id="" cols="30" rows="10"></textarea></div></form>
</body>
</html>效果：
***************
各种按钮效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
</head>
<body><button class="btn btn-default btn-lg">这是一个不一样的按钮</button><button class="btn btn-success btn-sm">这是一个不一样的按钮</button><button class="btn btn-primary active">这是一个不一样的按钮</button><button class="btn btn-info btn-block">这是一个不一样的按钮</button><button class="btn btn-danger" disabled="disabled">这是一个不一样的按钮</button><button class="btn btn-warning">这是一个不一样的按钮</button><button class="btn btn-link">这是一个不一样的按钮</button><a class="btn btn-warning" href="">这是a标签写的按钮</a>
</body>
</html>效果：
***********
*****************
viewport：响应式
***************
列表：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></head>
<body>
<ul class="list-group"><li class="list-group-item active">这是一个列表<span class="badge">消息数10</span></li><li class="list-group-item disabled">这是一个列表<span class="badge">消息数10</span></li><li class="list-group-item list-group-item-info">这是一个列表<span class="badge">消息数10</span></li>
</ul>
</body>
</html>效果：
*****************
面板：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></head>
<body><div class="panel panel-primary"><div class="panel-heading">弹出层</div><div class="panel-body">这是面板的具体内容</div><div class="panel-footer">这是脚注</div></div>
</body>
</html>效果：
*******************
插件-引用
先jQuery再bootstrap
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script></head>
<body>
<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger" >这是测试按钮</button>
<div id="danger" class="modal" >这是一个内容，点2次观察变化</div>
</body>
</html>效果：
**********
【Bootstrap】bootstrap快速入门相关推荐
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- [JavaWeb-Bootstrap]Bootstrap快速入门
快速入门 1. 下载Bootstrap2. 在项目中将这三个文件夹复制3. 创建html页面,引入必要的资源文件 <!DOCTYPE html><html lang="zh ...
- bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南
bootstrap快速入门 了解世界上最受欢迎的前端组件库的最新版本. (Get to know the newest version of the worlds most popular front ...
- Bootstrap快速入门（含旅游网案例）
Bootstrap快速入门 Bootstrap 更深入学习,进入Bootstrap中文网文档文档地址 很多案例,现学现用 Bootstrap: 概念: 一个前端开发的框架,Bootstrap,来自 T ...
- Bootstrap 一篇就够 快速入门使用（中文文档）
目录 一.Bootstrap 简介 什么是 Bootstrap? 历史 为什么使用 Bootstrap? Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap ...
- 使用bootstrap框架快速开发网页
使用bootstrap框架快速开发网页 本次使用bootstrap5+框架进行对网页进行快速开发,本文不涉及JavaScript内容,只涉及网页的搭建,即html和css的使用,如果有疑惑可以参考以下 ...
- IDEA中导入Bootstrap框架及入门教程
BootStrap简介 概念: 一个前端开发的框架.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开 ...
- Python之flask结合Bootstrap框架快速搭建Web应用
目录 前言 安装bootstrap扩展 模板的继承 总结 前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
- 人生苦短，我用Python（五）—通过Flask结合Bootstrap框架快速搭建Web应用-2
写在前面: Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http ...
- apache2.4.9 开启path_info访问_【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）...
新建项目 打开VS2015,找到菜单项[文件->新建->项目],打开向导对话框: 注意我们的选择项: 运行平台:.NET FrameWork 4.5 项目模板:ASP.NET Web Ap ...
最新文章
- 计算机开启时提示键盘错误,电脑开机出现异常提示keyboard not found的故障原因及解决方法_电脑故障...
- vxworks中断的使用
- 《C++语言基础》程序阅读——和对象找感觉
- Java_Notes_基础排序总结与对比
- Opportunity的chance of success的赋值逻辑
- python判断一个对象是否可迭代_python - 在Python中，如何确定对象是否可迭代？ - includeStdio...
- 如何注册java程序为windows服务
- 光落在你脸上，可爱一如往常
- 实战演练：通过伪列、虚拟列实现SQL优化
- js+JQuery实现返回顶部功能
- 设置linux系统的线程数量,Linux_查看系统cpu个数、核心数、线程数
- 相机标定示例（OpenCV /C++ /matlab工具箱TOOLBOX_calib）
- http响应报文详解
- java获取融云token、并实现群组聊天、管理等后台接口示例
- 查找文献时找不到全文的解决方法
- 1.3 Codesys十六进制数字字符串与字节互转
- SAP UI5 应用开发教程之一百零二 - SAP UI5 应用的打印(Print)功能实现详解试读版
- 几种常见卷积神经网络结构
- DXVA VDPAU FFDSHOW
- PointNeXt: Revisiting PointNet++ with Improved Training and Scaling Strategies