利用Bootstrap写一个Bootstrap官网；利用VUE实现TODOLIST

最新推荐文章于 2024-01-10 22:14:58 发布
最新推荐文章于 2024-01-10 22:14:58 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 日常总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjl_xupt/article/details/79887809
版权

一、Bootstrap写官网

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Bootstrap中文网</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 设置响应式导航栏必须引入一下这个jquery文件 -->
  	<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/jquery.min.js"></script>
  	<script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<style type="text/css">
		.jumbotron {
				background: #020031;
            background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
            background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));
            background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%);
            background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
            background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
            background: linear-gradient(45deg,#020031 0,#6d3353 100%);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=*#020031*, endColorstr=*#6d3353*, GradientType=1);
			}
			.navbar{
				margin:0px;
				padding:0px;
			}
	</style>
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid col-md-offset-1 navbar-fixed-top" >
			<div class="navbar-header">
        		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
         			<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="#">Bootstrap中文网</a>
			</div>

		<div class="collapse navbar-collapse" id="menu1">
			<ul class="nav navbar-nav">
				<li><a href="#">Bootstrap2中文文档</a></li>
				<li class="active"><a href="#" >Bootstrap3中文文档</a></li>
				<li><a href="#">Bootstrap4中文文档</a></li>
				<li><a href="#">Less教程</a></li>
				<li><a href="#">jQuery API</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 masthead bg-info">
		<div class="cotainer text-center">
			
				<h1 style="color: white;font-size: 100
				px">Bootstrap</h1>
				<h3 style="color: white">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h3>
				<br/><br/>
				
				<button type="button" class="btn btn-default btn-primary btn-lg">Bootstrap3中文文档v3.3.7</button> <br/><br/>
				<h5><a href="#" style="color: gray">Bootstrap2中文文档(v2.3.2)</a></h5>
				<br/><br/>
		</div>
	</div>

	<div class="container">
		<div class="row text-center">
			<a href="#" style="color: gray;font-size: 15px">bootstrap问答社区   |   </a>
			<a href="#" style="color: gray;font-size: 15px">新浪微博：@Bootstrap中文网</a><br/><br/>
		</div>

		<div class="row text-center">
			<h1>Bootstrap相关优质项目推荐</h1>
			<h5>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</h5>
		</div>

		<div class="row">
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>

		</div>



		<div class="row">
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<div style="background-color:purple;width: 100%;height: 100px" class="text-center">
					<h2 style="color:white;">Bootstrap编码规范</h2>
				</div>
					<h3 class="text-primary text-center"><a href="#" style="text-decoration: none">Bootstrap编码规范</a></h3>
					<h5 class="text-center"><a href="#" style="color:gray;text-decoration: none">by @mdo</a></h5>
					<p class="text-center">Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
					<br/><br/><br/><br/>
				</div>
			</div>

		</div>
	</div>


</body>
</html>

具体实现情况如下：





二、利用VUE实现TODOLIST

<!DOCTYPE html>
<!-- saved from url=(0032)http://192.168.10.250/vue02.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>VUE</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="../vue/vue.js.下载"></script>
</head>
<body>
	
	<div class="container" id="app">

		<div class="row">
			<div class="col-md-6 col-md-offset-5">

				<h1 class="text-primary">{{title}}</h1>
				<input type="text" name="text" placeholder="待办事项" v-model="newItem"/>
				<button type="button" class="btn text-info" v-on:click="addItem" v-on:keyup.enter="addItem">添加便签</button>
				
			</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-md-offset-5">
				<div class="thumbnail">
					<ul>
						<li v-for="(item,index) in items" class="text-center text-info" v-show="item.isshow">{{item.label}}<button class="btn btn-default bg-info" v-on:click="removeItem(index)" v-model="index">取消</button></li>
					</ul>
				</div>
			</div>
		</div>
	</div>



</body>
<script type="text/javascript">

	var vue=new Vue({

		el:'#app',
		data:{
			title: 'TODOLIST',
			items:[
				{
					label:'java天下第一',
					isshow:true
				},{
					label:'python天下第一',
					isshow:true
				}
			],
			newItem:'',
			message:'待办事项不能为空'
		},
		methods:{
			addItem:function(){
				if(this.newItem){
						this.items.splice(0,0,{
						label:this.newItem,
						isshow:true
					}); //点击添加按钮实现插入
						this.newItem='' //添加完之后输入框重置;
				}else{
					alert(this.message)
				}
				
			},

			removeItem:function(index){
				this.items[index].isshow=false
			}
			
		}

	});

</script>
</html>

实现情况如下：



三笠·阿卡曼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于bootstrap的网站导航页 HTML5代码
08-22
基于bootstrap 框架的网站导航页实现，包括巨幕、导航栏、下拉菜单以及内嵌页面实现 HTML5代码
利用bootstrap框架做的一个小demo
04-27
利用bootstrap框架做的一个小demo
炫酷的官网页面（bootstrap）
08-07
这是一套完整的官网页面，手机端和pc端都可精美显示，页面很有科技感，主要用bootstrap写的；
bootstrap vue.js实现tab效果
10-20
主要为大家详细介绍了bootstrap vue.js实现tab效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
结合Bootstrap实现一点点奶茶加盟官网首页页面效果
梨柚的博客
09-27 1423
学完bootstrap3后，找了一个简单的网站进行实战练习，只实现了网站首页的效果。用上bootstrap基本的栅格布局，轮播图和几个常用的样式类，适合小白练手。 整个完整首页的实现效果是这样的： 这里粘贴两个关键文件的代码：（完整项目资源放github，文末有地址。） 1、index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一点点官网|一点点.
Vue-Official-website:基于vue的官网脚手架
05-17
这是一个基于vue的框架来做公司的官网模板 优点： 搭建快速 模块引用 利于seo 缺点： 现阶段数据无法从接口获取展示 现阶段还有一些问题，请大家共同完善。这只是一种思路，通过更佳快捷方便的开发方式，让我们有更多的精力，去扩展其他内容。
使用BootStrap.编写网页
weixin_64938628的博客
05-06 3308
今天我们来使用BootStrap编写网页界面，首先我们需要在项目里导入Bootstrap的css文件和js文件，再到网页代码中编写导入语句 但是需要我们写的代码并不多，我们只需要修改就可以了，其他的都是复制的。 我们到Bootstrap官网（我用的版本是Bootstrap5）点击Docs，网页的左侧就会有我们需要的效果代码。 例如： 如果需要在网页在添加图片记得在项目里建一个文件专门放图片 top.jsp里写的是导航栏代码 <%@ page contentType...
bootstrap搭建一个简单的官网案例附代码
最新发布
.
01-10 1019
bootstrap搭建一个简单的官网案例附代码
【2023】Bootstrap+JSP+MySQL搭建电商网站
热门推荐
仨仨的博客
06-13 2万+
Bootstrap+jsp+Mysql搭建简易电商网站，包含增删改查商品、购物车、留言评价、用户商品管理等功能。
WEB前端网页设计-Bootstrap CSS 概览
君逍遥o
03-15 238
在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
基于vue+ bootstrap实现图片上传图片展示功能
08-30
主要介绍了基于vue+ bootstrap实现图片上传图片展示功能,需要的朋友可以参考下
使用Bootstrap和Vue实现用户信息的编辑删除功能
08-29
主要介绍了使用Bootstrap和Vue实现用户信息的编辑删除功能,需要的朋友可以参考下
Vue Cli与BootStrap结合实现表格分页功能
08-29
主要介绍了Vue Cli与BootStrap结合实现表格分页功能,需要的朋友可以参考下
Bootstrap的咖啡网站实例代码阅读笔记
昊虹AI笔记
10-27 588
Bootstrap的咖啡网站实例代码阅读笔记
bootstrap组件的案例代码
穆雄雄的博客
07-25 494
运行结果如图所示： 代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-sca...
bootstrap+css+html写官网博客效果。
weixin_46409887的博客
09-28 658
效果图如下: pc端: 移动端效果: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
循序渐进BootstrapVue，开发公司门户网站（6）--- 门户网站后端内容管理
null_10086的博客
07-16 413
我们在做门户网站的时候，如果网站的内容可以动态从后端进行管理，那么调整网站内容就非常方便，有时候如一些公司新闻、产品信息、轮播广告信息等都需要动态调整的，有一个方便的后端内容管理是非常方便的。本篇随笔介绍门户网站的后端管理界面，介绍网站后端的内容管理实现。 1、网站内容模块的设计冰蓝小说网 https://www.2961.info 从前面的系列文章，我们大概可以了解到门户网站的一些常用模块，如网站菜单、网站轮播广告、网站内容介绍（如公司信息、产品信息、合作伙伴、公司客户等）、网站图片展览、公司新闻等等模.
web前端：企业官网响应式bootstrap一套代码跑三端，首页基本功能
cevent的博客
01-21 993
1.项目需求 编码工具 H-Builder less预处理css工具 Koala考拉 响应式框架 bootstrap3.0 javascript jQuery1.10及以上 需求js bootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js 轮播图尺寸推荐 1920px*1200px 自建脚本 cevent.less cevent.js 2.效果图 2.1PC端 2.2手机、pad端 2.3小功能 3
20180227：关于HTML中table标签中合并单元格时遇到的问题
行无所至，学无所尽。
02-27 9214
今天在初次学习HTML的时候，便在table标签的使用上遇到了个问题，就是在合并单元格时发现单元格的合并显示之后并没有按自己所想的那样显示，具体问题也描述不出来，通过代码和实例来记录一下这个烦人的问题吧。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title
利用bootstrap写一个登录界面和一个注册界面
05-16
好的，下面是一个简单的登录界面和注册界面的代码示例，采用了Bootstrap框架和HTML/CSS编写。 登录界面代码： ```html <!DOCTYPE html> <html> <head> <title>Login</title> <!-- 引入Bootstrap样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- 自定义样式 --> <style> body { background-color: #f5f5f5; } .container { margin-top: 100px; max-width: 400px; padding: 20px; background-color: #fff; box-shadow: 0px 0px 10px 0px #ccc; border-radius: 5px; } h2 { text-align: center; margin-bottom: 20px; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" placeholder="Enter username"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> </div> <!-- 引入jQuery和Bootstrap JavaScript文件 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 注册界面代码： ```html <!DOCTYPE html> <html> <head> <title>Register</title> <!-- 引入Bootstrap样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- 自定义样式 --> <style> body { background-color: #f5f5f5; } .container { margin-top: 100px; max-width: 400px; padding: 20px; background-color: #fff; box-shadow: 0px 0px 10px 0px #ccc; border-radius: 5px; } h2 { text-align: center; margin-bottom: 20px; } </style> </head> <body> <div class="container"> <h2>Register</h2> <form> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" placeholder="Enter username"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <div class="form-group"> <label for="confirm-password">Confirm Password</label> <input type="password" class="form-control" id="confirm-password" placeholder="Confirm password"> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> </div> <!-- 引入jQuery和Bootstrap JavaScript文件 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 你可以将以上代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到登录界面和注册界面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值