7.7Bootstrap中文网练习

最新推荐文章于 2023-12-22 23:12:09 发布
最新推荐文章于 2023-12-22 23:12:09 发布
阅读量255 收藏
点赞数
文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws1995_java/article/details/81030377
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap 中文网</title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	</head>
	<body>
		
		<nav class="navbar navbar-static-top navbar-inverse"><!--2.是将导航栏固定在顶部3.是给导航栏添加一个灰色的背景-->
			<div class="container-fluid" >
				<div style="margin-left: 100px;margin-right: 100px;">
					<div class="navbar-header"><!--这是导航栏的头部-->
						<a href="#" class="navbar-brand">Bootstrap  中文网</a>
					</div>
					<ul class="nav navbar-nav"><!--navbar-nav将导航栏设置为横向-->
						<li><a href="#">Bootstrap2中文文档</a></li>
						<li><a href="#">Bootstrap3中文文档</a></li>
						<li><a href="#">Bootstrap4中文文档</a></li>
						<li><a href="#">Less教程</a></li>
						<li><a href="#">jQueryAPI</a></li>
						<li><a href="#">网站实例</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right"><li><a href="#">关于</a></li></ul>
				</div>
			</div>
		</nav>
	
		<div class="jumbotron" style="background-color:darkmagenta;"><!--jumbotron创建一个灰色的超大屏幕,可以添加一些东西-->
			<h1 align="center" style="color: white;">Bootstrap</h1>
			<h2 align="center" style="color: white;">简洁,直观,强悍的前端开发框架,让web开发更迅速,简单</h2>
			<div align="center">
				<button type="button" class="btn btn-primary"><h3>Bootstrap2中文文档(v2.3.2)</h3></button>
				<!--给按钮添加属性-->
			</div>
			</br>
			<div>
				<div align="center"><a href="#" style="color: white;">Bootstrap2中文文档(v2.3.2</a></div>
	 		</div>
 		</div>
 		
 		<div class="container-fluid">
 			<div class="row"style="background-color: gainsboro;">
 				</br>
 				<div class="col-lg-6" align="right">
 					<a href="#">Bootstrap问答社区</a>
 				</div>
 				<div class="col-lg-6" align="left">
 					<a href="#">新浪: @Bootatrap中文网</a>
 				</div>
 				</br>
 			</div>
 		</div>
 		<div class="container-fluid">
 			<div class="row">
 				<div class="col-lg-12">
 					<h1 align="center">Bootstrap相关优质项目推荐</h1>
 					<p align="center">这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
 				</div>
 			</div>
 		</div>
 		
 		<!--实例-->
 		
		<div class="container">
			<div class="row">
				<div class="col-lg-3">
					<div class="thumbnail">
							<img src="img/捕获.PNG">
							<div class="caption">
								<h2 style="color: #28A4C9" align="center"><a href="#">Type Script</a></h2>
								<p align="center"><a href="#" style="color: gray;">中文网</a></p>
								<p style="color: gray;">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
							</div>
						</div>
				</div>
				<div class="col-lg-3">
					<div class="thumbnail">
							<img src="img/捕获.PNG">
							<div class="caption">
								<h2 style="color: #28A4C9" align="center"><a href="#">Type Script</a></h2>
								<p align="center"><a href="#" style="color: gray;">中文网</a></p>
								<p style="color: gray;">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
							</div>
						</div>
				</div>
				<div class="col-lg-3">
					<div class="thumbnail">
							<img src="img/捕获.PNG">
							<div class="caption">
								<h2 style="color: #28A4C9" align="center"><a href="#">Type Script</a></h2>
								<p align="center"><a href="#" style="color: gray;">中文网</a></p>
								<p style="color: gray;">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
							</div>
						</div>
				</div>
				<div class="col-lg-3">
					<div class="thumbnail">
							<img src="img/捕获.PNG">
							<div class="caption">
								<h2 style="color: #28A4C9" align="center"><a href="#">Type Script</a></h2>
								<p align="center"><a href="#" style="color: gray;">中文网</a></p>
								<p style="color: gray;">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
							</div>
						</div>
				</div>
			</div>
		</div> 		
 		<!--结尾-->
 		<div class="container">
 			<div class="row">
 				<div class="col-lg-6"style="margin-top: 50px;">
 					<div>
 						<img src="img/www_assets_img_logo.png">
 						<p style="color: gray;">我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
 					</div>
 				</div>
 				<div class="col-lg-6" style="margin-top: 50px;">
 					<div class="row">
	 					<div class="col-lg-3">
	 						<div>
	 							<h4 style="color: gray;">关于</h4>
	 							<ul class="list-unstyled">
	 								<li><a href="#"style="color: gray;">关于我们</a></li>
	 								<li><a href="#"style="color: gray;">广告合作</a></li>
	 								<li><a href="#"style="color: gray;">友情链接</a></li>
	 								<li><a href="#"style="color: gray;">招聘</a></li>
	 							</ul>
	 						</div>
	 					</div>
		 				<div class="col-lg-3">
	 						<div>
	 							<h4 style="color: gray;">联系方式</h4>
	 							<ul class="list-unstyled">
	 								<li><a href="#"style="color: gray;">新浪微博</a></li>
	 								<li><a href="#"style="color: gray;">电子邮件</a></li>
	 							</ul>
	 						</div>
	 					</div>
	 					<div class="col-lg-3">
	 						<div>
	 							<h4 style="color: gray;">旗下网站</h4>
	 							<ul class="list-unstyled">
	 								<li><a href="#"style="color: gray;">Laravel中文网</a></li>
	 								<li><a href="#"style="color: gray;">Ghost中国</a></li>
	 								<li><a href="#"style="color: gray;">BootCDN</a></li>
	 								<li><a href="#"style="color: gray;">Packagist中国镜像</a></li>
	 								<li><a href="#"style="color: gray;">燃腾教育</a></li>
	 							</ul>
	 						</div>
	 					</div>
	 					<div class="col-lg-3">
	 						<div>
	 							<h4 style="color: gray;">赞助商</h4>
	 							<ul class="list-unstyled">
	 								<li><a href="#"style="color: gray;">京东云</a></li>
	 								<li><a href="#"style="color: gray;">又拍云</a></li>
	 							</ul>
	 						</div>
	 					</div>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="container" style="margin-top: 50px;margin-bottom: 50px;">
 		</style>
 			<div class="row">
 				<div class="col-lg-6">
 					<p><a href="#" style="color: gray; float: right;">京ICP备11008151号</a></p>
 				</div>
 				<div class="col-lg-6">
 					<p style="color: gray;">京公网安备11010802014853</p>
 				</div>
 			</div>
 		</div>
	</body>
	<!---->
</html>

ws1995_java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于bootstrap实现bootstrap中文网巨幕效果
08-30
主要介绍了基于bootstrap实现bootstrap中文网巨幕效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Html语言教程
water881的专栏
09-15 589
Html语言教程 <br /> 一、HTML 语言的结构 <br />　　html文件是标准的ASCII文件，它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲，html文件由元素 (element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)，在起始链接签和结尾链接签中向的部分是元素体。 每一个元
html h2垂直居中,css 垂直居中
weixin_29332623的博客
06-25 5598
我享一多很。等考指的似是很面一也者效下行插们知道在css中有元素的水平、垂直居中，而对元素水平居中是朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到很简单的：如果是行用它互不直曾经明以机会式近分扯。多接相常内元素，则对它的父元素采用text-algin：center；如果是一个块级元素则采用margin：览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我...
Bootstrap基础练习（一）
doc_wei
10-22 3553
在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下： .text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-i
bootstrap小练习
qq_54998648的博客
05-25 301
bootstrap提供的许多功能需要去慢慢了解，在项目中实战即可。这里将进行一个简单的表单制作。 用户登录表单 1.使用bootstrap进行响应式布局； 2.使用选项卡(tab)进行不同功能区的切换； 3.使用form-horizontal和form-group类进行表单布局； 4.使用form-control类美化表单控件； 5.使用btn btn-success等类美化按钮； 6.使用glyphicon设立图标； <!doctype html> <.
bootstrap网格系统及练习
weixin_47150940的博客
07-30 457
bootstrap网格系统 实现原理 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。 工作原理 Bootstrap 框架的网格系统工作原理如下： 1.数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。 <div class="container"> <div class=
Bootstrap V3 中文网 离线页面
05-28
Bootstrap中文网 离线页面，不收分了，希望给你带来方便，该压缩包是Bootstrap的http://v3.bootcss.com/ 离线镜像，下载后解压打开index.htm即可
bootstrap 中文模板
06-08
自己搜集整理的一些网上模板，基本全中文，共9个，其中4个内容相近全是前端管理，后面有1个学校项目适合java新手练习crm项目
Bootstrap中文参考手册chm格式
11-17
BootStrap中文离线参考手册，是chm格式的，下载解压后就能用，不用每次都去网上搜索bootstrap中文网去查了
响应式Bootstrap中文后台模板
04-02
响应式Bootstrap中文后台模板
Bootstrap基础练习28个样例（含代码）
04-30
自学的BootStrap,里面有28个基础样例（Css + jquery），Index.html目录起，适合开发时，忘记了，拿过来就用
bootstrap页面练习-4个完整页面--哈哈
09-26
bootstrap页面练习 里面有4个完整页面的练习 不是单项练习 资源齐全 包含效果图 原始文件 知识点ppt 拿来就可以用 2分绝对超值 本来想免费分享 无奈自己下资源没分啊 快来下载吧
bootstrap入门练习实例
03-09
本程序是一些关于怎样使用bootstrap的一些实例，教你一步一步的学学会怎样用Bootstrap设计出一个美观的网站。仔细讲解了关于网页设计中用到的所有的控件的样式和特效。也是王聪视频的源码。
BootStrap的简单练习
好好学习，天天向上
04-18 168
BootStrap的简单练习
[Bootstrap案例练习]——现代浏览器博物馆
tory886的博客
08-11 1563
一个Bootstrap案例练习——现代浏览器博物馆 练习时长：4-5h
Part2 bootstrap练习 2023.11.24-11.30
w_peifang的博客
11-25 337
1.bootstrap5容器有固定容器和流体容器。固定宽度容器是一种响应式的容器，会随着网页界面的大小改变容器的固定宽度的值，流体容器跨越整个屏幕。bootstrap5网格系统中最多有12列，用col-*-*来设置列的格式布局，第一个（*）是响应度，第二个（*）数字，每一列的数字加起来等于12.
网页设计练习--bootstrap篇（第四次课后练习）
最新发布
2301_79602950的博客
12-22 358
【代码】网页设计练习--bootstrap篇（第四次课后练习）
网页设计练习第四周-Bootstrap-5的学习
2302_80868896的博客
11-24 67
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 321
bootstrap练习
bootstrap中文网框架
06-08
Bootstrap中文网是一个开源的前端框架，它提供了众多的CSS、JavaScript组件和插件，可以帮助开发者快速开发出美观、响应式的网页。Bootstrap中文网框架是由Twitter的前端开发工程师Mark Otto和Jacob Thornton开发的，目前已经成为了最受欢迎的前端框架之一。它的特点是简单易用、响应式设计、跨平台兼容、自适应布局等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值