Bootstrap

最新推荐文章于 2023-06-28 09:24:43 发布

愆零落

最新推荐文章于 2023-06-28 09:24:43 发布

阅读量74

点赞数

文章标签： bootstrap html 前端

本文链接：https://blog.csdn.net/m0_67777597/article/details/124504802

版权

【前端开发框架】

一。了解Bootstrap

1.关于Bootstrap

           ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
           ②.是一个用于快速开发Web应用程序和网站的前端框架
           ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

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

2.为什么学习Bootstrap

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

3、在哪里可以用到Bootstrap

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

二、环境安装

       ①.下载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>对比原生态的button和Bootstrap的button区别</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
<style>	
		button{
			/* 手势 */
			cursor: pointer;
		}
</style>
	</head>
	<body>
		<button>原生态按钮</button>		
        <button class="btn btn-danger">首按钮</button>
        <button class="btn btn-default">二按钮</button>
        <button class="btn btn-info">三按钮</button>
        <button class="btn btn-warning">四按钮</button>
        <button class="btn btn-primary">五选项</button>
        <button class="btn btn-link">六按钮</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将禁止用户放大实际尺寸

案例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;
			}

			.lj {
				/* 右飘 */
				float: right;
				/* 右间距 */
				margin-right: 50px;
			}

			.lj a {
				/* 每隔间隔10个像素 */
				margin-left: 10px;
			}

			.ss {
				/* 背景颜色 */
				background-color: #DCDCDC;
				/* 高度 */
				height: 100px;
				/* 上右下左间距 */
				margin: 20px 50px 0px 50px;
				/* 水平居中 */
				text-align: center;
				/* 行高 */
				line-height: 100px;
			}

			.ss button {
				/* 字体颜色 */
				color: white;
				/* 背景颜色 */
				background-color: #007BFF;
				/* 去除边框 */
				border: 0px;
				/* 宽度 */
				width: 50px;
				/* 高度 */
				height: 30px;
				/* 设置边框圆角 */
				border-radius: 4px;
			}

			.ss input {
				/* 去除边框 */
				border: 0px;
				/* 宽度 */
				width: 200px;
				/* 高度 */
				height: 25px;
			}
		</style>
	</head>
	<body>
		<!-- 导航区域 -->
		<div class="dh">
			<div class="bt">您好，欢迎来到网上书店</div>
			<div class="lj">
				<a>首页</a>
				<a>登录</a>
				<a>注册</a>
				<a>我的购物车</a>
			</div>
		</div>
		<!-- 搜索区域 -->
		<div class="ss">
			<input type="text" />
			<button>查询</button>
		</div>
	</body>
</html>

       案例4：首页导航&搜索区域Bootstrap实现&搭首页框架
           ①.导航条组件的使用-Navbar
           ②.布局容器
               固定容器【class="container"】
                   大屏幕（大桌面显示器，大于等于 1200px）
                       lg（ large）
                   中等屏幕（桌面显示器，大于等于 992px）
                       md（middle）
                   小屏幕（平板，大于等于 768px）
                       sm（small）
                   超小屏幕（手机，小于 768px）
                       xs（extra small）
           ③.表单-Forms+输入框组组件-Input group
           ④.栅格系统-Grid system
               概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统
特点：会随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列
               网格系统策略图
               实现首页整体大致布局

愆零落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

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

扫一扫