BootStrap快速入门

最新推荐文章于 2024-06-18 21:32:55 发布
最新推荐文章于 2024-06-18 21:32:55 发布
阅读量130 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44905129/article/details/117992170
版权

1.BootStrap快速入门

官网地址：https://www.bootcss.com/

在这里插入图片描述
在这里插入图片描述

下载：https://v3.bootcss.com/getting-started/

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.BootStrap引入问题:注意引入的顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap</title>
		<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
	</head>
	<body>
		<!-- 注意引入的先后顺序 -->
		<!-- 如果要使用BootStrap的js插件，需先导入jQuery -->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<!-- 调用BootStrap的js插件，或者根据需要使用的js插件调用-->
		 <script src="bootStrap/js/bootstrap.min.js"></script>
		 
		 <h1>hello World</h1>
	</body>
</html>

在这里插入图片描述

3.固定宽度：两边留白

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap</title>
		<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
	</head>
	<body>
		<!-- 注意引入的先后顺序 -->
		<!-- 如果要使用BootStrap的js插件，需先导入jQuery -->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<!-- 调用BootStrap的js插件，或者根据需要使用的js插件调用-->
		 <script src="bootStrap/js/bootstrap.min.js"></script>
		
		 <div class="container" style="background-color: #B2DBA1;height: 500px;">
		 	如果要使用BootStrap的js插件，需先导入jQuery 
		 </div>
		 
	</body>
</html>

4. 流式布局：两边不留白

		<div class="container-fluid" style="background-color: #B2DBA1;height: 500px;">
		 	如果要使用BootStrap的js插件，需先导入jQuery 
		 </div>

5.流式栅格系统

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>BootStrap</title>
		<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css">
	</head>
	<body>			
		<div class="container">
			<div class="row">
				<div class="col-md-4" style="background-color: bisque">4</div>
				<div class="col-md-8" style="background-color: deeppink">8</div>
			</div>
		</div>
		 
	</body>
</html>

在这里插入图片描述

6.媒体查询

在这里插入图片描述

7.列偏移

在这里插入图片描述

8.列排序

在这里插入图片描述

9.列嵌套：每一列还可以再分为12列

在这里插入图片描述

10.常用版式

在这里插入图片描述
在这里插入图片描述
结果：
在这里插入图片描述

11.强调效果：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12.对其效果

在这里插入图片描述
在这里插入图片描述

13.列表

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

14.代码风格在这里插入图片描述

结果：
在这里插入图片描述
添加滚动条
在这里插入图片描述

15.表格

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
效果：
在这里插入图片描述

16.表单

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
复选框:
在这里插入图片描述
在这里插入图片描述
单选框：单选框的值取决于value，和外面的值是没有关系的
在这里插入图片描述
结果
在这里插入图片描述
按钮
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

表单布局

在这里插入图片描述
内联表单
在这里插入图片描述
缩略图
在这里插入图片描述
在这里插入图片描述
面板

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

BootStrap插件

在这里插入图片描述

导航

在这里插入图片描述
在这里插入图片描述
效果：
在这里插入图片描述

分页导航

在这里插入图片描述
在这里插入图片描述
效果：
在这里插入图片描述

下拉菜单

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
模态框
在这里插入图片描述
可查看菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
在这里插入图片描述

可以添加form表单
在这里插入图片描述
效果：
在这里插入图片描述

Dragon～～～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap入门（一）
qq_62331938的博客
04-27 2235
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
Bootstrap快速入门GitChat1
08-03
在Bootstrap快速入门中，首先需要了解其基本结构。Bootstrap的核心元素包括网格系统、导航、表单、按钮、图像、JavaScript插件等。网格系统是Bootstrap布局的基础，它基于12列的响应式栅格，允许开发者创建灵活的...
01.Bootstrap入门、CSS样式【栅格系统】
weixin_62356088的博客
04-12 831
目录 1. WWW：What、Why、Where 2 1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 2 2. 移动设备有限 2 3. 浏览器支持 2 4. 容易上手 2 1. 企业网站、博客、网站后台之类的网站 2 2. 注意：非电商(电商网站分类很多) 2 2. 环境安装 2 3. Bootstrap CSS 3 3.1. 概览 3 3.1.1. H5文档类型 3 3.1.2. 移动设备优先 3 3.1.3. 布局容器 3 3.2. 栅.
Bootstrap的快速入门
最新发布
2301_80638487的博客
06-18 1035
①Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.②Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架。
Bootstrap入门&全局CSS之概览&栅格系统
andrew_dear的博客
03-01 681
WWW What？ ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 Why？ ①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机） ②.移动设备优先 ③.浏览器支持
Bootstrap快速入门.pdf
08-19
这个框架由Twitter的开发者创建，提供了一系列预先设计的CSS、JS组件和HTML模板，可以帮助开发者快速而美观地创建网页布局。 在提供的代码片段中，我们可以看到几个关键的Bootstrap元素： 1. **引入Bootstrap CSS*...
BootStrap入门案例.zip
10-11
这个“BootStrap入门案例.zip”压缩包包含了多个文件，它们提供了关于使用Bootstrap学习的基础教程和实例。 首先，让我们逐一了解这些文件： 1. **01_BootStrap_HelloWorld.html** - 这个文件很可能是Bootstrap的...
bootstrap入门demo
02-23
这个"bootstrap入门demo"提供了一系列实例，旨在帮助初学者快速掌握Bootstrap的基本用法和核心特性。 Bootstrap的核心特点包括响应式设计、易于使用的预定义组件、强大的JavaScript插件以及一套一致的网格系统。在...
bootstrap
weixin_30680385的博客
10-26 106
屏幕尺寸(宽度) 超小屏幕，宽度 < 768， 如：手机 小型屏幕，768 <= 宽度 < 992，如：平板 中等屏幕，992 <= 宽度 < 1200，如：电脑 超大屏幕，宽度 >= 1200，如：电视 响应式布局 根据不同的客户端显示不同的效果，就称为响应式布局。 由于移动设备访问网站的比...
Bootstrap快速入门
LIUZEYU12A
02-22 140
Bootstrap： 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处： 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的...
Bootstrap_组件_分页条
zhangnan456的博客
08-29 180
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
bootstrap快速入门
晴夏的博客
04-09 273
1、Bootstrap 介绍 Bootstrap 是目前最受欢迎的前端框架，涵盖了页面开发的大部分css布局功能，js的特效功能，使得 Web 开发更加快捷。Bootstrap中先定义好了样式和特效，如果需要直接通过class和其他的属性进行调用。 2、导入 Bootstrap的js导入一定要导入jQuery，并且jQuery放在bootstrap.min.js导入之前，因为Bootstrap 的...
BootStrap入门
梦想是很难很难的，所以先勇敢一点
03-25 2068
介绍 Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。 作用 Bootstrap 使得 Web 开发更加快捷，高效。 BootStrap支持响应式开发，解决了移动互联网前端开发问题 什么是响应式布局、响应式布局能够解决的问题 响应式布局：一个网站的展示能够兼容多个终端(手机
Bootstrap框架快速入门与实战指南
"这篇资源是关于前端开发框架Bootstrap的快速入门教程，主要针对初学者，提供了全面的案例学习，帮助开发者快速掌握Bootstrap的使用。Bootstrap因其便捷性和广泛的公司应用而备受推崇，能有效提高开发效率，缩短项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值