Bootstrap【前端开发框架】

最新推荐文章于 2024-05-20 22:38:25 发布

X4866233

最新推荐文章于 2024-05-20 22:38:25 发布

阅读量142

点赞数

文章标签： bootstrap jquery html

本文链接：https://blog.csdn.net/X4866233/article/details/124776150

版权

一、WWW

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

2.Why？
①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）
②.移动设备优先
③.浏览器支持
④.容易上手

3.Where？
企业网站、博客、网站后台之类的网站
电商（电商网站分类太多）

二、环境安装

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

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

三、案例

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--查询按钮原生态实现  -->
		<button>查询</button>
		<a onclick="aa()">查询</a>
		<input type="button" value="查询">
		<!-- Bootstrap方式实现-->
		<button class="btn alert-primary">查询</button>
	</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将禁止用户放大实际尺寸

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

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

<div id="aa">
			<div class="bb">
				
				<div class="logo">哈哈哈哈</div>
				<div class="top">
					<a href="">哈哈</a>
					<a href="">嘿嘿</a>
					<a href="">呵呵</a>
					<a href="">哦哦</a>
				</div>
			</div>
			<div class="sou">
				<input type="text" />
				<button>搜索</button>
			</div>
		</div>




<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		#aa{
			background-color: palevioletred;
			height: 100px;
		}
		.bb{
			height: 30px;
			background-color: #0062CC;
			line-height: 30px;
		}
		.logo{
			float: left;
			margin-left: 20px;
		}
		.top{
			float: right;
			margin-right: 30px;
		}
		.top a{
			text-decoration: none;
			color: #FEFEFE;
			display: inline-block;
			width: 70px;
			
		}
		.top a:hover{
			color: #34CE57;
		}
		
		.sou{
			background-color: #721C24;
			width: 50%;
			height: 25px;
			margin: 0 auto;
			margin-top: 10px;
			text-align: center;
			line-height: 25px;
		}
		.sou input{
			width: 50%;
			height: 25px;
			font-size: 10px;
			font-family: "arial narrow";
		}
		.sou button{
			width: 50px;
			height: 30px;
			color: #1E7E34;
			background-color: #202326;
		}
		</style>

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

<nav class="navbar navbar-light bg-light">
		  <a class="navbar-brand" href="#">红红火火恍恍惚惚</a>
		  <ul class="nav justify-content-end">
		    <li class="nav-item">
		      <a class="nav-link active" href="#">Active</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Link</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Link</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link disabled">Disabled</a>
		    </li>
		  </ul>
		</nav>

②.布局容器

固定容器【class="container"】
大屏幕（大桌面显示器，大于等于 1200px）
lg（ large）
中等屏幕（桌面显示器，大于等于 992px）
md（middle）
小屏幕（平板，大于等于 768px）
sm（small）
超小屏幕（手机，小于 768px）
xs（extra small）

③.表单-Forms+输入框组组件-Input group

<!-- 巨幕组件 -->
		<div class="jumbotron jumbotron-fluid">
		  <div class="container">
		   <!-- 输入框组件-->
		   <div class="input-group mb-3" style="text-align: center;">
		     <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
		     <div class="input-group-append">
		       <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
		     </div>
		   </div>
		  </div>
		</div>

④.栅格系统-Grid system

概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统
特点：会随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列
网格系统策略图

<!-- 栅格系统 -->
		<div class="container">
		  <div class="row">
		    <div class="col">
		      1 of 2
		    </div>
		    <div class="col">
		      2 of 2
		    </div>
		  </div>
		  <div class="row">
		    <div class="col">
		      1 of 3
		    </div>
		    <div class="col">
		      2 of 3
		    </div>
		    <div class="col">
		      3 of 3
		    </div>
		  </div>
		</div>

X4866233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap【前端开发框架】

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

扫一扫