Bootstrap

最新推荐文章于 2024-07-07 02:58:35 发布
最新推荐文章于 2024-07-07 02:58:35 发布
阅读量269 收藏
点赞数
文章标签： bootstrap html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65795413/article/details/124509970
版权

1.Bootstrap是什么?

What？
    ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
    ②.是一个用于快速开发Web应用程序和网站的前端框架
    ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷
    概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

Why？
    ①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）
    ②.移动设备优先
    ③.浏览器支持
    ④.容易上手
Where？
    企业网站、博客、网站后台之类的网站
    电商（电商网站分类太多）


2、 环境安装
    1、下载Bootstrap库
               https://v4.bootcss.com/
    2、页面中引入库
              bootstrap.css：Bootstrap核心样式【添加到head标签中】
              jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
              bootstrap.js：Bootstrap核心库
        【添加到</body>之前】
3.案例展示：

案例1：查询按钮原生态实现对比Bootstrap方式实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>案例一.二</title>
		<style type="text/css">
			.aa{
				background-color:#007BFF ;/* 背景颜色 */
				color: white;/* 字体颜色 */
				border: 0px;/* 去除边框 */
				width: 50px;
				height: 30px;
				border-radius: 5px;/* 设置边框圆角 */
			}
		</style>
		<!-- 引入Bootstrap的css样式 -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
	<body>
		<!-- 固定容器 -->
		<div class="container">
		<button class="aa">查询</button>
		<hr color="red" />
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- bootstrap的按钮 -->
		<button class="btn btn-outline-success">搜索</button>
		
		</div>
		<!-- 引入jquery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入bootstrap的类库 -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	
	</body>
</html>

案例2：演示Bootstrap页面在手机浏览器中展示效果
        在head中添加：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
            width=device-width：呈现在不同设备上
            initial-scale=1.0：以1:1比例呈现，不会有任何缩放
            user-scalable=no：禁用网页缩放功能
            maximum-scale=1.0：页面放大程序，1.0将禁止用户放大实际尺寸
 


    案例3：首页导航&搜索区域原生态实现（div+css）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例三</title>
		<style type="text/css">
			.dh{
				height: 50px;/* 高度 */
				background-color: #F8F9FA;/* 背景颜色 */
				line-height: 50px;/* 垂直居中 */
			}
			.bt{
				float: left;/* 左浮动 */
				margin-left: 50px;/* 左间距 */
				font-size: 20px;
			}
			.an{
				float: right;/* 右浮动 */
				margin-right: 50px;/* 右间距 */
			}
			.an a{
				margin-left: 10px;/* 有间隔 */
			}
			.ss{
				height: 100px;
				background-color: #DCDCDC;/* 背景颜色 */
				text-align: center;/* 水平居中 */
				line-height: 100px;/* 行高 */
				margin: 30px 50px 0px 50px;/* 上右下左 */
			}
			.ss input{
				border: 0px;
			}
			.ss button{
				background-color:#007BFF ;/* 背景颜色 */
				color: white;/* 字体颜色 */
				border: 0px;/* 去除边框 */
				width: 50px;
				height: 30px;
				border-radius: 5px;/* 设置边框圆角 */
			}
		</style>
	</head>
	<body>
		<!-- 导航区域 -->
		<div class="dh">
			<div class="bt">你好，欢迎来到牛B的书店</div>
			<div class="an">
				<a>首页</a>
				<a>登录</a>
				<a>注册</a>
				<a>我的购物车</a>
			</div>
		</div>
		<!-- 搜索区域 -->
		<div class="ss">
			<input />
			<button>查询</button>
		</div>
		
	</body>
</html>

 案例4：首页导航&搜索区域Bootstrap实现&搭首页框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例四</title>
		<!-- 引入bootstrap的样式 -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style type="text/css">
			.navbar-collapse{
				flex-grow:0;/* 1代表弹性扩大占用父容器剩余空间  0代表不占用*/
			}
			.form-group{
				 width: 300px;/* 宽度 */
				 
			 }
			 .ss{
				 height: 100px;/* 高度 */
				 margin-top: 30px;/* 上间距 */
				 background-color: #DCDCDC;/* 背景颜色 */
			 }
		</style>
	</head>
	<body>
		<!-- 导航区域条组件  -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
				<a class="navbar-brand" href="#">您好，欢迎来到牛逼书店</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
				 aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">登录</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">注册</a>
						</li>
						<li class="nav-item">
							<a class="nav-link " href="#">我的购物车</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 栅格搭建主页框架 -->
		<div class="container">
			<!-- 第一行： 1列:搜索区域 -->
			<div class="row ss" style="background-color: pink;">
				<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="button-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button" id="button-addon2">查询</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>

			<!-- 第二行-->
			<div class="row">
				<div class="col-3" style="background-color: yellow;">
					左三为书籍分类
				</div>
				<div class="col-9">
					<!-- 右9为 轮播图&新书上架&热门书籍 -->
					<!-- 右9中第一行 -->
					<div class="row" style="background-color: yellowgreen;">
						<div class="col">
							轮播图
						</div>
					</div>

					<!-- 右9中第二行 新书上架 5列-->
					<div class="row" style="background-color: moccasin;">
						<div class="col">
							①新书上架
						</div>
						<div class="col">
							②新书上架
						</div>
						<div class="col">
							③新书上架
						</div>
						<div class="col">
							④新书上架
						</div>
						<div class="col">
							⑤新书上架
						</div>
					</div>

					<!-- 右9中第三行 热门书籍 5列-->
					<div class="row" style="background-color: skyblue;">
						<div class="col">
							①热门书籍
						</div>
						<div class="col">
							②热门书籍
						</div>
						<div class="col">
							③热门书籍
						</div>
						<div class="col">
							④热门书籍
						</div>
						<div class="col">
							⑤热门书籍
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 分别引入jquery和bootstrap的类库 -->
		<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>

陨落.190
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap-Blog：一般的Bootstrap博客，以备将来使用
02-14
这是基于Bootstrap的博客的通用模板 Tailor by modifying fields in blog_data.json in ./statc/blog_content 修订（1/31/2021） 该网站现在使用docker在平台之间移植。 从docker的存储库中实现mongo卷。 安装docker。 从Bootstrap-blog目录运行开发人员模式： docker-compose -f docker-compose.yml up --build 运行生产模式在分离模式下使用pm2： docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build --detach 要停止运行构建： docker-compose down 要清理停顿的作业：
bootstrap
weixin_44654375的博客
02-15 2318
bootstrap 能够完成BootStrap环境搭建 能够理解bootstrap的栅格系统 能够查询文档创建BootStrap的按钮、表格、表单等常用组件 能够查询文档使用BootStrap的轮播图、分页条 能够利用Bootstrap完成网站首页 第一章 bootstrap简介 1.1 bootstrap概述 1.1.1 什么是bootstrap Bootstrap，基于 HTML、CSS、...
一文学会 BootStrap
最新发布
阿城的博客
07-07 575
自动布局列也能和断点搭配使用，在不同断点下，进行不同的列布局，比如大屏列多一点，小屏列少一点。比如实现一行8列的布局，12的因数没有8，所以如果要使用网格系统实现，我们就需要嵌套。另外，col 包裹实际内容的，为了美观，所以给 col 设置内边距 15px，防止实际内容紧贴着容器 container。分别对应着：手机，手机横屏，平板，小屏笔记本13、14寸，一般尺寸的电脑。在xl屏幕显示6列，在lg屏幕显示4列，在md屏幕显示3列，在sm屏幕显示2列，特小屏(none)显示1列。
JAVA从零开始学习知识整理——HTML——day05—【Bootstrap】
weixin_44167508的博客
01-26 264
一、Bootstrap 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
html5,bootstrap实现博客系统前端页面
01-11
html5实现的博客主页面index.html，article.html,tags.html,list_xwzj.html,index_lyb.html,index_awy.html等等，包括css,amages,js等，是静态页面，拿来就可以直接用
BootStrap的简单介绍
热门推荐
星空之尘的博客
05-23 2万+
BootStrap 概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。 框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。 好处： ① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。 ② 响应式布局：同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 下载后有三个文件夹，将这三个文件夹复制到项目中 创建html页面，引入必要的资源 <!DOCTYPE html> <h
Bootstrap 学习（一）入门
子冰吖的博客
04-10 5359
一：什么是Bootstrap？ Bootstrap是目前留下的前端框架之一，具备已下特点： 基于HTML、CSS、JavaScript开发的； 样式展现方面定义了大量全局样式、列表、按钮等样式组件； 特效方面实现了轮播、菜单等常用的js控件； 样式采用less编写，js调用了jquery库； 来自Twitter，现在委托保管再github上。 Bootstrap适用于网站的开发，不适用于管理系...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值