行业资讯

Bootstrap前端框架入门

发布时间：2020-07-05 06:52:30 作者：沈猪猪
来源：网络 阅读：903

bootstrap下载：http://v3.bootcss.com/getting-started/

bootstrap中文文档：http://www.bootcss.com/

jquery下载：http://jquery.com/download/


工具：HBuilder

下载地址：http://www.dcloud.io/


下面是我刚学习的例子，主要是熟悉bootstrap自带的class.

Bootstrap前端框架入门


login.html内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/mybs.css"/>
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<!-- 使用bootstrap.min.js必须先引入jquery.min.js,可以到jquery官网下载最新的 -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>

<!-- 
导航栏 
navbar-fixed-top: 上下滚动的时候，永远显示在顶部 
-->

<nav class="nav navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!--
设置隐藏按钮，跟下面的隐藏内容对应，当像素小于768px,会触发这个隐藏按钮
-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">
<!-- 导航航默认高度是50px，所以注意图片的height -->
<img src="img/logo.png"  />
</a>
</div>
<!--
    当浏览器窗口缩小的时候，隐藏这部分内容
-->
  <div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><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">
编程
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="">Python</a>
<ul class="dropdown-menu">
<li><a href="">python_1</a></li>
<li class="divider"></li>
<li><a href="">python_2</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="">C++</a></li>
</ul>
</li>
</ul>
<div class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入关键字" />
<div class="input-group-btn">
<button class="btn btn-block">
<span class="glyphicon glyphicon-search">搜索</span>
</button>
</div>
</div>
</div>
<div class="form-group">
<a href="" class="navbar-link">登录</a>
<span >|</span>
<a href="" class="navbar-link">注册</a>
</div>    
</div>
  </div>
</div>
</nav>
  <div ></div>
  
<!-- 用户登录表单 -->
<div class="container" > 
<h2 class="page-header"><span class="glyphicon glyphicon-user">用户登录</span></h2>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="用户名/Email" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="password" class="form-control" placeholder="密码" />
</div>
</div> 
<div class="form-group">
<div class="col-md-4">
<button class="btn-primary">登录</button>
</div>
</div>
</form>
</div>

<div ></div>
<div class="container">
<!-- Tab标签 -->
<div class="row">
<div class="col-md-6">
<ul id="mytab" class="nav nav-tabs">
<li class="active">

<!-- 两个tab标签-->
<a href="#xw1" data-toggle='tab'>新闻1</a>
</li>
<li>
<a href="#xw2" data-toggle='tab'>新闻2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id='xw1'>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
</div>
<div class="tab-pane fade" id='xw2'>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
</div>
</div>
</div>
</div>

<!-- 面包屑导航 -->
<div class="row">
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href="">开发语言</a></li>
<li><a href="" class="text-muted">web应用</a></li> 
</ul>
</div>
</div>
</div>

<!-- 缩略图 -->
<div ></div>
<div class="container">
<div class="row">
<!-- bootstrap中一行只能包含12个列，多余的列会另起一行 -->
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a href="http://www.cloud.net">云官网</a></h4>
    <p>创业公司</p> 
</div>
</div>
</div>

<!--
  网格系统
-->
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a href="http://www.cloud.net">云官网</a></h4>
    <p>创业公司</p> 
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a href="http://www.cloud.net">云官网</a></h4>
    <p>创业公司</p> 
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a href="http://www.cloud.net">云官网</a></h4>
    <p>创业公司</p> 
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a href="http://www.cloud.net">云官网</a></h4>
    <p>创业公司</p> 
</div>
</div>
</div>
<div class="col-md-4">

<!--
  嵌套网格
-->
<div class="col-md-6">  
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a href="http://www.cloud.net">云官网</a></h4>
    <p>创业公司</p> 
</div>
</div>
</div>
<div class="col-md-6">
<div class="page-header">
<h3>openstack介绍</h3>
</div>
<p>openstack介绍</p>
</div>
</div>
</div>
</div>

              <!--
        	 使用列表组
               -->
		<div class="container-fluid">
			<div class="col-md-9">
				<div class="list-group" >
					<div class="list-group-item" >
						<a href=""><h5>openstack org</h5></a>
						<small>发布时间：2015-2-11</small>
						<small class="pull-right">
							点击量：<span class="badge">20</span>
						</small>
						<p class="text-muted">
				********************************************
				********************************************
				********************************************
				********************************************
						</p>
						<p>
						<span class="badge">奇犽</span> <span class="badge">小杰</span>
						</p>
					</div>
					<div >	
					</div>
					
					<div class="list-group-item" >
						<a href=""><h5>openstack org</h5></a>
						<small>发布时间：2015-2-11</small>
						<small class="pull-right">
							点击量：<span class="badge">20</span>
						</small>
						<p class="text-muted">
				********************************************
				********************************************
				********************************************
				********************************************
						</p>
						<p>
						   <span class="badge">奇犽</span> <span class="badge">小杰</span>
						</p>
					</div>
					<div >	
					</div>
					
	            <!--
                    分页显示
                    -->
                    <div class="text-center">
                    	     <ul class="pagination">
                    	     	<!-- 向前箭头 -->
                    	     	<li><a href="">&laquo;</a></li>
                    	     	<li><a href="">1</a></li>
                    	     	<li><a href="">2</a></li>
                    	     	<li><a href="">3</a></li>
                    	     	<li><a href="">4</a></li>
                    	     	<li><a href="">5</a></li>
                    	     	<!-- 向后箭头 -->
                    	     	<li><a href="">&raquo;</a></li>
                    	     </ul>
                    </div>        
		  </div>
		</div>
	    </div>



<!-- tab触发切换  -->
<script type="text/javascript">
//$('#mytab a[href="#xw2"]').tab('show');  
//$('#mytab a:last').tab('show');
//$('#mytab li:eq(0) a').tab('show');
$('#mytab').on('shown.bs.tab',function(e){
var txt=$(e.target).attr('href');
var pretxt=$(e.relatedTarget).attr('href');
$(txt).html($(pretxt).html());
//$('#xw2').html('yao');
})
</script>
</body>
</html>



推荐阅读：
  1. Python 前端框架【Bootstrap】
  2. Bootstrap入门

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

bootstrap strap ootstrap

上一篇：Vue.js学习笔记： 插值

下一篇：Python学生管理系统示例

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号