Bootstrap[前端开发框架-1]

最新推荐文章于 2024-04-30 15:44:23 发布
最新推荐文章于 2024-04-30 15:44:23 发布
阅读量883 收藏
点赞数 1
文章标签： bootstrap 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66202611/article/details/124484344
版权

Bootstrap是什么？

①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

②.是一个用于快速开发Web应用程序和网站的前端框架

③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

为什么要使用Bootstrap？

①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）

②.移动设备优先

③.浏览器支持

④.容易上手

在哪里使用较多？

1.企业网站、博客、网站后台之类的网站

2.电商使用比较少因为电商网站分类太多

 环境安装

        ①.下载Bootstrap库
                https://v4.bootcss.com/

        打开bootstrap文件，选中dist


        ②.页面中引入库
                bootstrap.css：Bootstrap核心样式【添加到head标签中】
                jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

 点开后看到csjs文件s和


        bootstrap.js：Bootstrap核心库

 找到bootstrap.css然后将其到入项目CSS包中

导完CSS包后，还需导入jQuery.js和bookstrap.js包


提示：【添加到</body>之前】为什么要加在body结束标签之前，为了提高效率


        

《 案例如下》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例4:首页导航&搜索区域Bootstrap实现&搭首页框架</title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			.navbar-collapse {
				flex-grow: 0;
				/* 1、代表制动会占用父容器剩余空间 0代表不占用 */
			}

			.ss {
				height: 100px;
				background-color: #dcdcdc;
				margin-top: 20px;

			}

			.form-group {
				width: 300px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 31px;
			}
		</style>
	</head>
	<body>
		<!-- 导航条 -->
		<nav class="navbar navbar-expand-lg navbar-light btn-light">
			<div class="container">
				<a class="navbar-brand" href="#">您好,欢迎来到天堂</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
					aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-item nav-link" href="#">登陆</a>
						<a class="nav-item nav-link" href="#">注册</a>
						<a class="nav-item nav-link " href="#">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
		<!-- 删除系统来实现首页的部分框架 -->
		<div class="container">
			<!-- 第一行 -->
			<div class="row ss">
				<div class="col">
					<form>
						<div class="form-group">
							<div class="input-group mb-3">
								<input type="text" class="form-control" placeholder="书籍关键字"
									aria-label="Recipient's username" aria-describedby="basic-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">查询</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>

			<div class="row">
				<!-- 第二行 -->
				<div class="col-3" style="background-color:burlywood;">
					左3-书籍分类
				</div>

				<div class="col-9">
					<!-- 右9-轮播图&新书上架&热门书籍 -->
					<div class="row">
						<div class="col" style="background-color: skyblue; ">
							<!-- 右9中第一轮播图 -->
							<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
								<ol class="carousel-indicators">
									<!-- 指示灯部分 -->
									<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
								</ol>
								<div class="carousel-inner">
									<div class="carousel-item active">
										<!-- 图片部分 -->
										<img src="img/lb1.png" class="d-block w-100" alt="...">
									</div>
							 	<div class="carousel-item">
										<img src="img/lb2.jpg" class="d-block w-100" alt="...">
									</div>
									<div class="carousel-item">
							  	<img src="img/lb3.jpg" class="d-block w-100" alt="...">
									</div>
									<div class="carousel-item active">
										<img src="img/lb4.png" class="d-block w-100" alt="...">
									</div>
									<div class="carousel-item active">
										<img src="img/lb1.png" class="d-block w-100" alt="...">
									</div>
								</div>
								<!-- 左右箭头 -->
								<button class="carousel-control-prev" type="button"
									data-target="#carouselExampleIndicators" data-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="sr-only">Previous</span>
								</button>
								<button class="carousel-control-next" type="button"
									data-target="#carouselExampleIndicators" data-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="sr-only">Next</span>
								</button>
							</div>
						</div>
					</div>
					<div class="row" style="background-color: pink; ">
						<!-- 右9中新书上架 -->
						<div class="col" style="background-color: pink; ">
							①新书上架
						</div>
						<div class="col" style="background-color: opink ">
							②新书上架
						</div>
						<div class="col" style="background-color: pink; ">
							③新书上架
						</div>
						<div class="col" style="background-color: pink; ">
							④新书上架
						</div>
						<div class="col" style="background-color: pink; ">
							⑤新书上架
						</div>
					</div>

					<div class="row" style="background-color: burlywood; ">
						<!-- 右9中新书上架 -->
						<div class="col" style="background-color: pink; ">
							①热门书籍
						</div>
						<div class="col" style="background-color: pink; ">
							②热门书籍
						</div>
						<div class="col" style="background-color: pink; ">
							③热门书籍
						</div>
						<div class="col" style="background-color: pink; ">
							④热门书籍
						</div>
						<div class="col" style="background-color: pink; ">
							⑤热门书籍
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 分别引入jquery的js和bootstrap的js -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

	</body>
</html>

呼啦啦dxy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS第九章 移动端布局-Bootstrap
晓葉斑比
06-05 1063
BootstrapBootstrapContainersGrid system栅格系统Grid optionsAuto-layout columnsEqual-widthSetting one column width 设置列宽度 Bootstrap Bootstrap是HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 好处：不需要自己写样式，它提供了大量的class样式供选择 我下的最新版本v5.0.1，不同版本提供的内容有改变 特色：1. 响应式布局（不需要自己写media q
Bootstrap(前端开发框架)
qq_64001795的博客
05-07 8127
目录 前端框架的理解 一、3个WWW 1、what？是什么 2、why？为什么使用 3、where？使用领域 二、环境安装 1、下载Bootstrap库 2、页面中引入库 三、案例 以网上书城为例 案例1：查询按钮原生态实现对比Bootstrap方式实现 案例2：演示Bootstrap页面在手机浏览器中展示效果 案例3：首页导航&搜索区域原生态实现（div+css） 案例4：首页导航&搜索区域Bootstrap实现&搭首页框架 前端框架的理解...
前端框架---Bootstrap的使用
最新发布
m0_74249162的博客
04-30 1263
Bootstrap是一个来自Twitter的前端开发框架，它基于HTML、CSS和JavaScript，以其简洁灵活的特性使得Web开发更加快捷。基本结构网格系统：Bootstrap使用12列网格布局，可以快速构建响应式布局。通过添加class到HTML元素上，可以指定元素在不同屏幕宽度下的列数和偏移量。CSS样式：Bootstrap包含了大量的预设CSS样式，如排版、颜色、按钮、表单等，可以快速地为网页添加统一的样式。JavaScript插件。
Bootstrap前段框架（一篇到底）
让优秀成为一种习惯！
04-02 3339
概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架注意： 不适用于过于复杂的电商网站下载Bootstrap库 ：点击进入进入网址点击下载Bootstrap 三个均可下载，使用下载生产文件和源码 如：解压后打开dist文件夹 导入js文件 1-后缀.js为开发版本（需要改源代码用） 2-后缀为 .min.js为生产版本导入css文件 添加到body标签结束之前 为什么CSS要放在前面 ？ 如演示： 通过Bootstrap实现的按钮演示以及固定容器会
Bootstrap——前端开发框架
gzmhxsn的博客
10-31 371
Bootstrap使用媒体查询针对不同宽度的设备进行布局和样式的设置，达到适配的目的。
BootStrap前端框架
Skf_0004010的博客
11-04 5127
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
前端开发框架bootstrap3教程
05-25
《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法，包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程，您将能够掌握Bootstrap3的核心技术，为您的Web开发工作提供便利和...
bootstrap-5.3.0-alpha1.zip
01-11
Bootstrap是世界上最受欢迎的前端开发框架，它以HTML、CSS和JavaScript为基础，专为构建响应式、移动优先的网站而设计。Bootstrap 5.3.0-alpha1是该框架的一个预发布版本，它提供了最新的功能和改进，以帮助开发者更...
Java bootstrap-3.4.1-dist 前端框架
03-18
2. **预定义的组件**：Bootstrap提供了许多预定义的UI组件，如按钮、表单、下拉菜单、导航条、模态框、轮播图等，这些组件大大简化了前端开发工作，只需添加相应的类名即可实现丰富的界面效果。 3. **自定义样式**...
前端框架Bootstrap-MVC
09-22
总的来说，"前端框架Bootstrap-MVC"是结合了流行的Bootstrap框架和MVC设计模式的前端开发工具，旨在提升开发效率，保证项目的可维护性和跨平台适应性，尤其适用于需要快速构建响应式网站的场景。
1-4_前端框架BootStrap.pdf
01-19
Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的开源前端框架，由 Twitter 公司的 Mark Otto 和 Jacob Thornton 开发。Bootstrap 提供了一整套的 UI 组件、布局系统、响应式设计等功能，可以帮助开发者快速构建...
bootstrap前端框架
06-29
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Metronic框架(Bootstrap实现的整套前端框架)
11-03
Metronic框架里面集成了很多插件：spinner、iCheck、Select2、touchSpinner等等
前端Bootstrap框架
08-20
前端Bootstrap框架，非常好用，快来下载试用吧,版本3.3.7
前端bootstrap框架项目一套
01-19
前端bootstrap框架项目一套，这是我半年web前端bootstrap框架的学习成果，好不好自己可以感觉到
bootstrap的前端页面框架
02-04
用bootstrap做的前端页面框架，适合用作门户、网购、官网、博客等网站
23.0 Bootstrap 框架1
清风
09-26 1620
1.2 优点 1.3 版本 1.4 使用方式 1.4.1 CDN引用 1.4.2 本地引用 2.Bootstrap5 页面 2.1 doctype声明 2.2 移动设备优先 3. 响应式容器 屏幕尺寸 超级小屏幕
Bootstrap01
qq_64200256的博客
03-31 565
目录 Bootstrap 适用于 优势 安装环境 Bootstrap ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 适用于 企业网站、博客、网站后台之类的网站 优势 ①.响应式设计（Bootstr
bootstrap 前端开发框架
m0_73783119的博客
02-27 625
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，他是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。bootstrap提供一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口的池翠怎家，系统会自动分为最多12列。bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份。
Bootstrap前端开发框架完全指南
Bootstrap是一个由Mark Otto和Jacob Thornton在Twitter上共同创建的开源网页开发框架，自2011年8月发布以来，它已成为GitHub上最受欢迎的项目之一。Bootstrap以其强大的功能和易用性，极大地推动了前端开发的效率。...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值