一、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>
实现情况如下: