练习使用bootstrap

已于 2022-03-09 15:20:18 修改
阅读量336 收藏
点赞数
文章标签： html5 bootstrap
于 2022-03-09 15:14:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58766017/article/details/123378062
版权

使用bootstrap编写导航条和网页（2020年3月9日作业）

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<nav class="navbar navbar-default">
			<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" aria-expanded="false">
						<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 class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">参考资料<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">编程语言</a></li>
								<li><a href="#">数据库</a></li>
								<li><a href="#">web框架</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">菜鸟教程</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">w3c school</a></li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search">
						</div>
						<button type="submit" class="btn btn-default">Submit</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">登录</a></li>
						<li><a href="#">注册</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">博客模板 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">bootstrap</a></li>
								<li><a href="#">vue</a></li>
								<li><a href="#">ract</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">other</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->

		</nav>




		<div class="container-fulid ">
			
			
			<div class="row">
				<div class="col-md-2">
				<div class="panel-body">
					<ul class="list-group">
						<a href="#" class="list-group-item">博客文章</a>
						<a href="#" class="list-group-item">bug更改</a>
						<a href="#" class="list-group-item">经典算法</a>
						<a href="#" class="list-group-item">技术文章</a>
						<a href="#" class="list-group-item">专题讨论</a>
					</ul>
					
				</div>
				</div>
			



			<div class="col-md-8">		

				<!-- 	<div class="row"> -->
				<div class=" col-md-4">
					<div class="thumbnail">
						<img src="./image/OIP-C.jpg" alt="...">
						<div class="caption">
							<h3>编程入门C语言</h3>

							<p><a href="https://baike.baidu.com/item/c%E8%AF%AD%E8%A8%80/105958" class="btn btn-primary"
									role="button">简介</a> <a href="https://www.dotcpp.com/" class="btn btn-default"
									role="button">去C语言学习网</a></p>
						</div>
					</div>
				</div>

				<div class=" col-md-4">
					<div class="thumbnail">
						<img src="./image/OIP-C.jpg" alt="...">
						<div class="caption">
							<h3>编程入门C语言</h3>

							<p><a href="https://baike.baidu.com/item/c%E8%AF%AD%E8%A8%80/105958" class="btn btn-primary"
									role="button">简介</a> <a href="https://www.dotcpp.com/" class="btn btn-default"
									role="button">去C语言学习网</a></p>
						</div>

					</div>
				</div>
				
				
				<div class=" col-md-4">
					<div class="thumbnail">
						<img src="./image/OIP-C.jpg" alt="...">
						<div class="caption">
							<h3>编程入门C语言</h3>
				
							<p><a href="https://baike.baidu.com/item/c%E8%AF%AD%E8%A8%80/105958" class="btn btn-primary"
									role="button">简介</a> <a href="https://www.dotcpp.com/" class="btn btn-default"
									role="button">去C语言学习网</a></p>
						</div>			
					</div>					
				</div>
			
				</div>
			
			
			<div class="col-md-2">
				<div class="panel-body">
					<ul class="nav nav-pills nav-stacked">
					  <li role="presentation" class="active"><a href="#">主页</a></li>
					  <li role="presentation"><a href="#">简介</a></li>
					  <li role="presentation"><a href="#">信息</a></li>
					  <li role="presentation"><a href="#">我的</a></li>
					  <li role="presentation"><a href="#">关于</a></li>
					  
					</ul>
					
				</div>

			</div>

	</div>
		
		</div>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>

		<!-- <script src="js/jquerty.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> -->
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
	</body>
</html>
网页的运行结果如下图

点击查看

不想做小白的小白程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
bootstrap练习题
PanHanJia的博客
09-10 2015
什么是BootStrap框架 Html、Css和BootStrap框架的关系是什么 下列代码布局合理吗？不合理的话，应该怎么改进 <div> 名字：<input type="text" name="username"> <br> 昵称：<input type="text" name="nickname"> <...
bootstrap网格系统及练习
weixin_47150940的博客
07-30 475
bootstrap网格系统 实现原理 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。 工作原理 Bootstrap 框架的网格系统工作原理如下： 1.数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。 <div class="container"> <div class=
BootStrap的简单练习
好好学习，天天向上
04-18 188
BootStrap的简单练习
大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品
最新发布
网页设计与制作 | HTML+CSS+JS
06-08 640
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀
网页设计练习第四周-Bootstrap-5的学习
2302_80868896的博客
11-24 109
1、.container类（响应式页面）和.container-fluid类（全宽页面）；.pt-5类增加页面顶部填充；2、.p设置padding，.m设置margin，x设置左右，y设置上下；bg：background，text：文本；1、.cow创建一个行，.col-size-*创建列宽；网格系统从堆叠（小型设备）到水平（较大设备）；3、网格：.row创建一行，.col-sm|md|lg|xl|xxl-*（数字）设置所占列数；
bootstrap练习
m0_62788719的博客
11-03 344
bootstrap练习
web-akademik:练习使用BOOTSTRAP创建一个学术WEB模板
04-12
在本项目中，我们将深入探讨如何使用BOOTSTRAP这一流行的前端框架来创建一个适用于学术环境的Web模板。Bootstrap是一款强大的工具，它简化了网页设计和开发过程，特别适合快速构建响应式、移动优先的网站。这里，...
bootstrap入门练习实例
03-09
9. **快速启动**: 使用Bootstrap的starter模板，可以迅速搭建起一个基本的网页结构，减少了开发初期的工作量。 10. **社区支持**: Bootstrap有一个庞大的开发者社区，提供了大量的文档、教程和插件，遇到问题时可以...
Bootstrap项目练习.zip
05-15
在“微票-Bootstrap”和“΢Ʊ-Bootstrap”这两个项目中，你可以实践如何运用上述知识点，例如，通过栅格系统布局票务信息，使用响应式设计确保在不同设备上的良好体验，利用预定义组件创建购票表单，以及通过...
bootstrap页面练习-4个完整页面--哈哈
09-26
这些文件通常包含了Bootstrap的基本概念、核心原理和使用方法。你可以从中学习到如何初始化一个Bootstrap项目，理解其网格系统、排版样式、导航条、按钮、表单、图像、模态框、下拉菜单等基本元素的创建和应用。此外...
bootstrap案例练习-仿星巴克
10-11
在这个"bootstrap案例练习-仿星巴克"中，你将深入理解如何利用Bootstrap的强大功能来创建一个类似星巴克的网页布局。以下是对各个组件的详细说明： 1. **栅格系统**： Bootstrap的栅格系统基于12列的布局，允许你...
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
一份bootstrap框架期末作业，请注意查收
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
bootstrap实现步骤页面_java学习(八十三) : BootStrap(1)
weixin_32028965的博客
01-18 312
BootStrap 是Twitter的工程师开发的前端框架，可以非常方便的设计出好看的页面效果。原生html和Bootstrap的效果比较如下：使用Bootstrap 很简单，按照如下步骤进行即可。步骤 1 : 因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上 ---------------------------------------------...
Bootstrap练习：百度登录框
斜键仙的博客
11-03 2731
练习：点击登录，弹出一个登录表单，运用到了bootstrap模态框知识和js的插件，练习源文件在下面给出自行下载。 目录一、练习目录结构二、练习源码三、运行效果小结 一、练习目录结构 二、练习源码 index.html文件代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
web前端期末大作业——基于Bootstrap响应式汽车经销商4S店官网21页
STU网页设计
11-23 695
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常
Bootstrap小白入门训练营
soos的博客
08-23 230
Bootstrap简介 Bootstrap是来自Twitter目前最后欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得web开发 更加快捷。 Bootstrap是一款响应式UI框架。 先区分响应式和自适应两个概念： 响应式：一套代码适应多个终端（如worktile,利仁）。 适合于展示型的网站， 功能多，或内容特效多了就不太适用了， 响应式更多的是理想状态。 自适应：多套代码，根据不同的设备加载不同的代码（如爱淘宝） 另外说一下与之有关的两个相对单位：em和
Bootstrap小练习
qq_36365638的博客
08-20 472
Bootstrap 101 Template                                                                                                                              
bootstrap中CSS的学习1
08-08
同时，通过实践和不断练习，我们可以进一步深入了解和熟练使用bootstrap的CSS，提升自己在前端开发中的能力。如果在学习过程中遇到任何问题，可以随时咨询相关的人员，以便更好地理解和掌握bootstrap的使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值