中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

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

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Bootstrap前端框架入門

發布時間：2020-07-05 06:52:30 來源：網絡 閱讀：903 作者：沈豬豬 欄目：web開發

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 >云官網</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 >云官網</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 >云官網</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 >云官網</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 >云官網</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 >云官網</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>



向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
湖北省| 金门县| 扶风县| 左云县| 姜堰市| 商河县| 廉江市| 泾阳县| 石家庄市| 江西省| 任丘市| 抚远县| 乳源| 安徽省| 南丰县| 精河县| 东辽县| 汝城县| 大同市| 墨竹工卡县| 仪征市| 洪雅县| 佛坪县| 恭城| 库尔勒市| 虹口区| 呼和浩特市| 礼泉县| 清涧县| 肇庆市| 苏州市| 无为县| 安福县| 滦南县| 城步| 罗平县| 东辽县| 两当县| 白玉县| 合肥市| 偏关县|