溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Bootstrap前端框架入門

發(fā)布時(shí)間：2020-07-05 06:52:30 來源：網(wǎng)絡(luò) 閱讀：903 作者：沈豬豬 欄目：web開發(fā)

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

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

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


工具：HBuilder

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


下面是我剛學(xué)習(xí)的例子，主要是熟悉bootstrap自帶的class.

Bootstrap前端框架入門


login.html內(nèi)容如下：

<!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,可以到j(luò)query官網(wǎng)下載最新的 -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>

<!-- 
導(dǎo)航欄 
navbar-fixed-top: 上下滾動(dòng)的時(shí)候，永遠(yuǎn)顯示在頂部 
-->

<nav class="nav navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!--
設(shè)置隱藏按鈕，跟下面的隱藏內(nèi)容對(duì)應(yīng)，當(dāng)像素小于768px,會(huì)觸發(fā)這個(gè)隱藏按鈕
-->
<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">
<!-- 導(dǎo)航航默認(rèn)高度是50px，所以注意圖片的height -->
<img src="img/logo.png"  />
</a>
</div>
<!--
    當(dāng)瀏覽器窗口縮小的時(shí)候，隱藏這部分內(nèi)容
-->
  <div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">首頁(yè)</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="請(qǐng)輸入關(guān)鍵字" />
<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">注冊(cè)</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標(biāo)簽 -->
<div class="row">
<div class="col-md-6">
<ul id="mytab" class="nav nav-tabs">
<li class="active">

<!-- 兩個(gè)tab標(biāo)簽-->
<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百花爭(zhēng)鳴</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-1</span></p>
</div>
<div class="tab-pane fade" id='xw2'>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花爭(zhēng)鳴</a><span class="pull-right">2015-10-2</span></p>
</div>
</div>
</div>
</div>

<!-- 面包屑導(dǎo)航 -->
<div class="row">
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href="">開發(fā)語言</a></li>
<li><a href="" class="text-muted">web應(yīng)用</a></li> 
</ul>
</div>
</div>
</div>

<!-- 縮略圖 -->
<div ></div>
<div class="container">
<div class="row">
<!-- bootstrap中一行只能包含12個(gè)列，多余的列會(huì)另起一行 -->
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a >云官網(wǎng)</a></h4>
    <p>創(chuàng)業(yè)公司</p> 
</div>
</div>
</div>

<!--
  網(wǎng)格系統(tǒng)
-->
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a >云官網(wǎng)</a></h4>
    <p>創(chuàng)業(yè)公司</p> 
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a >云官網(wǎng)</a></h4>
    <p>創(chuàng)業(yè)公司</p> 
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a >云官網(wǎng)</a></h4>
    <p>創(chuàng)業(yè)公司</p> 
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a >云官網(wǎng)</a></h4>
    <p>創(chuàng)業(yè)公司</p> 
</div>
</div>
</div>
<div class="col-md-4">

<!--
  嵌套網(wǎng)格
-->
<div class="col-md-6">  
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h4><a >云官網(wǎng)</a></h4>
    <p>創(chuàng)業(yè)公司</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>發(fā)布時(shí)間：2015-2-11</small>
						<small class="pull-right">
							點(diǎn)擊量：<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>發(fā)布時(shí)間：2015-2-11</small>
						<small class="pull-right">
							點(diǎn)擊量：<span class="badge">20</span>
						</small>
						<p class="text-muted">
				********************************************
				********************************************
				********************************************
				********************************************
						</p>
						<p>
						   <span class="badge">奇犽</span> <span class="badge">小杰</span>
						</p>
					</div>
					<div >	
					</div>
					
	            <!--
                    分頁(yè)顯示
                    -->
                    <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觸發(fā)切換  -->
<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>



向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手