初学bootStrap(学习笔记)

最新推荐文章于 2022-04-12 08:40:12 发布
最新推荐文章于 2022-04-12 08:40:12 发布
阅读量334 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 初学bootStrap(学习笔记)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43354761/article/details/89006837
这篇博客介绍了BootStrap的基础知识，包括完整的头文件设置、栅格系统的参数及其响应式效果。通过实例展示了如何创建导航条、轮播图片，并在轮播图片中插入文字。博主详细讲解了如何实现响应式设计，特别是在不同设备尺寸下，如平板和手机的显示优化。最后，通过一个首页案例，展示了BootStrap在创建响应式网站方面的强大功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

什么是bootStrap?
在这里插入图片描述

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

在这里插入图片描述
完整的头文件
在这里插入图片描述

在这里插入图片描述

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

栅格参数

<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css" />
		<script src="../js/jquery-1.11.0.js"></script>
		<link type="text/javascript" src="../bootstrap-3.3.5-dist/js/bootstrap.js" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<style>
			div{
				border: red 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
				<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
				<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
				<div class="col-md-1 col-sm-2">.col-md-1</div>
			</div>
			<div class="row">
				<div class="col-md-8">.col-md-8</div>
				<div class="col-md-4">.col-md-4</div>
			</div>
			<div class="row">
				<div class="col-md-4">.col-md-4</div>
				<div class="col-md-4">.col-md-4</div>
				<div class="col-md-4">.col-md-4</div>
			</div>
			<div class="row">
				<div class="col-md-6">.col-md-6</div>
				<div class="col-md-6">.col-md-6</div>
			</div>
		</div>

	</body>

运行结果
在这里插入图片描述
缩小
在这里插入图片描述
再缩小
在这里插入图片描述
通过栅格达到响应式的效果

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

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

组件:导航条

	<nav class="navbar navbar-inverse">

轮播图片里面插文字

<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="../img/1.jpg" alt="...">
							<div class="carousel-caption">
								<h3>电脑大促销</h3>
								<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
							</div>
						</div>

<div class="row"> 
				<div class="col-md-4">
					<h2>公司简介</h2>
					<p>发展潜力大发展潜力大发展潜力大发展潜力大发展潜力大发展潜力大发展潜力大发展潜力大发展潜力大发展潜力大</p>
					<a href="www.itheima.com" class="btn btn-danger">了解更多</a>
				</div>
				<div class="col-md-4">
					<h2>公司潜力</h2>
					<p>上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司上市大公司</p>
					<a href="www.itheima.com" class="btn btn-primary">了解更多</a>
				</div>
				<div class="col-md-4">
					<h2>加入我们</h2>
					<p>我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好我们待遇好</p>
					<a href="www.itheima.com" class="btn btn-info">了解更多</a>
				</div>
				
			</div>

运行结果
在这里插入图片描述

网站首页案例

<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css" />
		<script src="../js/jquery-1.11.0.js"></script>
		<link type="text/javascript" src="../bootstrap-3.3.5-dist/js/bootstrap.js" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 引入bootStrap所需要的头文件
			 1 div布局容器 class = "container"
			 2 放八行row 	
			  -->
	</head>
	<body>
		<!-- 最外层容器 -->
		<div class="container">
			<!-- 1  logo部分 -->
			<div class="row">
				<div class="col-md-4 col-sm-6">
					<img src="../img/logo2.png" />
				</div>
				<div class="col-md-4 hidden-sm hidden-xs">
					<img src="../img/header.jpg" />
				</div>
				<div class="col-md-4 col-sm-6" style="line-height: 50px; height: 50px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<!-- 2  导航栏部分 -->
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">首页</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
							<li><a href="#">电脑配件</a></li>
							<li><a href="#">瓜子花生</a></li>
							<li><a href="#">阴影项链</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类 <span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">手机数码</a></li>
									<li><a href="#">电脑配件 action</a></li>
									<li><a href="#">更多</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>

<li class="divider"></li>
									<li><a href="#">One more separated link</a></li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>

					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>


			<!-- 3  轮播图 -->
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="../img/1.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					<div class="item">
						<img src="../img/2.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					<div class="item">
						<img src="../img/3.jpg" alt="...">
						<div class="carousel-caption">
							...
						</div>
					</div>
					...
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
			<!-- 4  最新商品 -->

<div class="row">
				<div class="col-md-12">
					<h2>最新商品<img src="../img/logo.gif"></h2>
				</div>
			</div>
			<!-- 5 商品图片-->
			<div class="row">
				<!-- 左边图片 -->
				<div class="col-md-2" style="height: 480px;">
					<img src="../products/hao/big01.jpg" />
				</div>
				<!-- 右变图片 -->
				<div class="col-md-10">
					<!-- 神犬 -->
					<div class="col-md-6" style="height: 240px;">
						<img src="../products/hao/middle01.jpg" />
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->

<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
				</div>
			</div>
			
			
			<!-- 6  广告部分 -->
			<div class="row">
				<div class="col-md-12">
					<img src="../products/hao/ad.jpg" width="100%"/>
				</div>
			</div>
			<!-- 4  最新商品 -->
			<div class="row">
				<div class="col-md-12">
					<h2>热门商品<img src="../img/logo.gif"></h2>
				</div>
			</div>
			<!-- 5 商品图片-->
			<div class="row">
				<!-- 左边图片 -->
				<div class="col-md-2" style="height: 480px;">
					<img src="../products/hao/big01.jpg" />
				</div>
				<!-- 右变图片 -->
				<div class="col-md-10">
					<!-- 神犬 -->
					<div class="col-md-6" style="height: 240px;">
						<img src="../products/hao/middle01.jpg" />
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />

<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
					<!-- 高压锅 -->
					<div class="col-md-2" style="height: 240px;">
						<img src="../products/hao/small09.jpg" />
						<p align="center">究极蛇皮高压锅</p>
						<p align="center">$99</p>
					</div>
				</div>
			</div>

			</div>
			<!-- 8  footer -->
			<div class="row">
				<div class="col-md-12">
					<img src="../img/footer.jpg" align="center"/>
				</div>
			</div>
			
			<!-- 9. 第八部分: 放一堆超链接 -->
			<div style="text-align: center;">
			
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
			
				<br />
			
				Copyright © 2005-2016 传智商城 版权所有
			</div>
			
		</div>
	</body>

运行结果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

响应式代码

在logo的三张图中,
让中间的图在缩放到平板,手机尺寸时,消失不见

<!-- 最外层容器 -->
		<div class="container">
			<!-- 1  logo部分 -->
			<div class="row">
				<div class="col-md-4 col-sm-6">
					<img src="../img/logo2.png" />
				</div>
				<div class="col-md-4 hidden-sm hidden-xs">
					<img src="../img/header.jpg" />
				</div>
				<div class="col-md-4 col-sm-6" style="line-height: 50px; height: 50px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>

运行结果
在这里插入图片描述
缩放
在这里插入图片描述
再缩放
在这里插入图片描述
达到响应式页面的效果!

最后来一次总结

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

Bootstrap入门（一）
qq_62331938的博客
04-27 2418
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
Bootstrap学习笔记
qq_51861704的博客
05-17 503
1：背景 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如W.
01.Bootstrap入门、CSS样式【栅格系统】
weixin_62356088的博客
04-12 1347
目录 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入门&全局CSS之概览&栅格系统
andrew_dear的博客
03-01 765
WWW What？ ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 Why？ ①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机） ②.移动设备优先 ③.浏览器支持
Bootstrap学习笔记（一）
雁过无声的博客
09-29 173
版本V3.3.7 可以直接下载生产环境。 使用引用css文件即可 &lt;link href="bootstrap.mini.css"&gt; Bootstrap使用H5的文档类型 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; ... &lt;/html&gt; 移动设备优先需要添加 &lt;meta name="
HTML，CSS，bootStrap学习笔记.zip
最新发布
11-08
资源简介《HTML，CSS，Bootstrap学习笔记》是一个综合性的学习资源包，旨在帮助初学者和进阶开发者全面掌握前端开发的基础知识和技能。本资源包涵盖了HTML、CSS和Bootstrap这三个前端开发的核心领域，通过详细的笔记...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
bootstrap学习笔记
01-08
### Bootstrap 学习笔记知识点详解 #### 一、Bootstrap简介 Bootstrap是一款非常流行的前端开发框架，它基于HTML、CSS及JavaScript构建，旨在帮助开发者快速搭建响应式的网站和应用。通过预定义的样式和布局，...
Bootstrap的用法学习笔记
03-18
在"Bootstrap的用法学习笔记"中，我们将深入探讨如何有效地利用这个框架。 一、Bootstrap的基本结构 Bootstrap的核心构建块包括网格系统、排版、导航、表单、按钮、图像和其他UI元素。首先，引入Bootstrap库到HTML...
Bootstrap基本组件学习笔记之input输入框组(9)
11-28
Bootstrap是一款广泛应用于网页设计与开发的前端框架，它提供了一系列优雅的组件和工具，使得创建响应式、功能丰富的网站变得...对于初学者来说，可以参考官方文档、在线教程和实战案例，进一步提高Bootstrap应用能力。
bootstrap学习笔记(一)
码农1425的博客
11-13 739
BOOTSTRAP第一天笔记 响应式页面 响应式页面概述 1. 什么是响应式页面 响应式网页（RWD，Responsive Web Design），2010年5月由Ethan Marcotte提出。简而言之，就是一个网站能够针对多个终端提供不同的显示样式，而不是针对每个终端制作一个特定的版本。 由于智能手机和平板电脑的兴起，网站页面的制作不仅要满足PC端浏览器的显示，还要满足智能手机浏览器的显示或者
bootstrap 学习笔记（一）
cdmamata的专栏
10-27 1025
在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。 以下为 bootstrap 3.3.5 学习中记录的东西，方便查阅，作者使用的是 jsp ，跟 html 可能有稍许不同，请自行参考修改 【引用文件】 【页面引用】 路径请自行规划 /js-lib/jquery/jquery-1.11.2.min.js
初学bootstrap
灵魂画师牧码
03-17 1145
之前一直写web前端的时候写的比较傻，用html原生语言，css样式写到吐，而且写的不好看，总出各种问题，然后就想到了响应式布局bootstrap，进而由于工作原因，今天写了两个很简单的页面，以其中一个为例记录一下 代码bootstrap_demo 写bootstrap首先要导入bootstrap的css样式文件和自己的style.css文件，分别用于引用它的样式和设定自己的样式，代码如下<
BootStrap学习笔记（二）
Starrk的盗梦空间
03-06 359
Bootstrap 下拉菜单（Dropdowns） 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。 对齐 通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。 Bootstrap 按钮组 btn-group按钮组 btn-toolbar按钮组的按钮组 按钮下拉菜单 如需向按钮添加下拉菜单，只需...
BootStrap应用实例学习笔记
geekun的博客
05-05 3928
第二次学习bootstrap了，这次主要以实际用例为主，做一下总结。51CTO课程链接:BootStrap零基础学习实战视频课程Bootstrap官方文档1. 登陆表单在bootstrap中，大量使用div标签控制层级关系，使用class属性控制样式表现。<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
新手初学Bootstrap
weixin_43844663的博客
06-04 192
Bootstrap 添加样式引用 在 header 中添加 bootstrap 的样式引用。注意路径。 <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/> bootstrap.min.css 是 bootstrap 的样式文件，包含了所有的 boot
Bootstrap学习笔记 01 - 开始
Cynhard的专栏
10-31 487
获取 Bootstrap通过 bower 获取：bower install bootstrap如果用到 jQuery，则可以通过 npm 下载：npm install --save jquery第一个页面<!-- 文档类型，Bootstrap 要求使用 HTML5 doctype --> <!DOCTYPE html> <html> <head> <!-- 使用 utf-8
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值