2. 程式人生 > >bootstrap基礎介紹（二）

bootstrap基礎介紹（二）

阿新 • • 發佈：2018-12-10

一、下拉選單

注意：我們通常用.pull-right使按鈕選單內容右對齊 ，class="disabled"表示禁用狀態，class="active"表示當前狀態

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉選單
    <span class="caret"></span><!----表示下拉箭頭---->
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"><!--pull-right表示按鈕選單內容右對齊，可用dropdown-menu-right代替，不加的話表示預設左對齊-->
	<li role="presentation" class="dropdown-header">第一部分選單頭部</li><!----表示第一部分的選項分類標題---->
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">蘋果</a></li><!--tabindex表示按了tab鍵後指向的選項-->
    <li role="presentation" ><a role="menuitem" tabindex="-1" href="#">橘子</a></li>    
    <li role="presentation" class="divider"></li><!--表示分割線-->
    <li role="presentation" class="dropdown-header">第二部分選單頭部</li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">桃子</a></li>
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
  </ul>
</div>

二、按鈕

按鈕組的大小，通過： .btn-group-lg:（大按鈕組）、 .btn-group-sm:（小按鈕組）、 .btn-group-xs:（超小按鈕組）

<div class="btn-toolbar"><!--btn-toolbar類名是為了把一組按鈕放到一個框內，用於區別-->
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>  
</div>
<br />
<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>

實現下拉效果的按鈕：按鈕組.btn-group ； 垂直按鈕 .btn-group-vertical；等分按鈕（也叫響應式按鈕）.btn-group-justified 注意和form-group效果對比

 <div class="btn-group dropup"><!--dropup是為了讓下拉按鈕的箭頭朝上顯示--><!--class="btn-group-vertical"是為了實現按鈕組的垂直分佈，預設的不加則是水平分佈-->
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
      關於我們<span class="caret"></span>
      </button>
    <ul class="dropdown-menu">
    	<li><a href="##">公司簡介</a></li>
    	<li><a href="##">企業文化</a></li>
    	<li><a href="##">組織結構</a></li>
    	<li><a href="##">客服服務</a></li>
    </ul>
  </div>

三、導航

1、標籤形tab導航：.nav-tabs

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li><!--class="active"表示當前選中狀態-->
 	<li><a href="##">profit</a></li>
 	<li><a href="##">product</a></li>
 	<li><a href="##">contact</a></li>
 	<li class="disabled"><a href="##">map</a></li><!--class="disabled"表示禁用狀態-->
 </ul>

2、膠囊形導航：.nav-pills

 <ul class="nav nav-pills"><!--在這裡加入nav-stacked類名錶示垂直堆疊的導航，加入nav-justified表示自適應導航，兩端對齊導航-->
    <li class="active"><a href="##">Home</a></li>
 	<li><a href="##">CSS3</a></li>
 	<li><a href="##">Sass</a></li>
 	<li><a href="##">jQuery</a></li>
 	<li class="disabled"><a href="##">Responsive</a></li>
</ul>

3、麵包屑導航：breadcrumb

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">簡介</a></li>
  <li class="active">聯絡</li>
</ol>

4、帶下拉選單的導航

<ul class="nav nav-pills ">
	  <li class="active"><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><a href="##">品牌文化</a></li>
	        <li><a href="##">歷史程序</a></li>
	        <li><a href="##">品牌概念</a></li>	        
	      </ul>
	  </li>
	 <li><a href="##">關於我們</a></li>
</ul>

四、導航條

1、基礎導航條

<div class="navbar navbar-default  navbar-fixed-top " role="navigation"><!--navbar表示導航條，與nav區分； 
 .navbar-fixed-top表示固定導航條在頂部； .navbar-fixed-bottom固定導航條在底部；
navbar-default 表示基礎色導航條，也可以用navbar-inverse表示反色導航條-->
  　<div class="navbar-header"><!--navbar-header表示導航頭部部分和navbar-brand結合使用-->
  　    <a href="##" class="navbar-brand">大公司</a>
  　</div>
	<ul class="nav navbar-nav">
		<li class="active"><a href="##">網站首頁</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">公司簡介
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
        	<li><a href="##">企業歷史</a></li>
        	<li class="disabled"><a href="##">經典歷程</a></li>
          </ul>
       </li>
       <li class="active"><a href="##">聯絡我們</a></li>
       <li><a href="##">地圖</a></li>
       <li><a href="##" class="navbar-text">Navbar Text</a></li>
	</ul>
	<form action="##" class="navbar-form navbar-left" rol="search"><!--navbar-left表示讓表單左浮動，也可以用navbar-right-->
   	    <div class="form-group">
   		   <input type="text" class="form-control" placeholder="請輸入關鍵詞" />
   	    </div>
        <button type="submit" class="btn btn-default">搜尋</button>
     </form>
</div>

導航條中的按鈕navbar-btn 導航條中的文字navbar-text 導航條中的普通連結navbar-link

2、響應式導航條

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
       <a href="##" class="navbar-brand">慕課網</a>
  </div>
  <!-- 螢幕寬度小於768px時，div.navbar-responsive-collapse容器裡的內容都會隱藏，顯示icon-bar圖示，當點選icon-bar圖示時，再展開。螢幕大於768px時，預設顯示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
    	<ul class="nav navbar-nav">
      		<li class="active"><a href="##">網站首頁</a></li>
      		<li><a href="##">系列教程</a></li>
      		<li><a href="##">名師介紹</a></li>
      		<li><a href="##">成功案例</a></li>
      		<li><a href="##">關於我們</a></li>
	 	</ul>
  </div>
</div>

3、分頁導航條 a、-帶頁碼的分頁導航

<ul class="pagination pagination-lg"><!-- pagination-lg表示分頁導航的大小，pagination-sm也可設定導航條效果-->
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li class="active"><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul> 
  
<ul class="pagination pagination">
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li class="active"><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul>   
<ul class="pagination pagination-sm">
  <li><a href="#">&laquo;第一頁</a></li>
  <li><a href="#">11</a></li>
  <li class="active"><a href="#">12</a></li>
  <li><a href="#">13</a></li>
  <li class="disabled"><a href="#">最後一頁&raquo;</a></li>
</ul>

b、翻頁分頁導航

<ul class="pager">
  <li class="previous disabled"><a href="#">&laquo;上一頁</a></li><!--previous表示靠左  disabled表示禁用-->
  <li class="next"><a href="#">下一頁&raquo;</a></li><!--next表示靠右 -->

五、標籤徽章

1、標籤 注意：label-default|primary|success|info|warning|danger表示不同顏色的標籤

Example heading New

預設標籤 主要標籤 成功標籤 資訊標籤 警告標籤 錯誤標籤 2、徽章 
<li class="active"><a href="#">Home <span class="badge">42</span></a></li><!--badge用在span裡面表示徽章提示作用-->

六、內建元件

1、縮圖

<div class="container">
    <div class="row">
		<div class="col-xs-12 col-md-12 col-lg-6">
			<a href="#" class="thumbnail"><!--thumbnail專門針對縮圖的類名-->
				<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
			</a>
			<div class="caption"><!--caption專門針對於一個系列縮圖中的除了圖片其他的介紹-->
				<h3>Bootstrap</h3>
				<p>BootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrap...</p>
				<p>
					<a href="##" class="btn btn-primary">開始學習</a>
					<a href="##" class="btn btn-info">正在學習</a>
				</p>
			</div>  
		</div>
	    <div class="col-xs-12 col-md-12 col-lg-6">
	    	<a href="#" class="thumbnail">
		    	<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    <div class="caption">
		    	<h3>Bootstrap</h3>
	    		<p>BootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrapBootstrap...</p>
		    	<p>
			    	<a href="##" class="btn btn-primary">開始學習</a>
		    		<a href="##" class="btn btn-info">正在學習</a>
			    </p>
		    </div>   
    	</div>    
	</div>
</div>

2、警示框

注意：我們用alert-success|info|warning|danger表示不同顏色的經實況

請輸入正確的密碼 您已操作失敗兩次，還有最後一次機會 對不起，您輸入的密碼有誤

3、進度條

<h2>基本進度條</h2>
<div class="progress">
     <div class="progress-bar" style="width:40%">
    </div>
</div> 
<h2>彩色進度條</h2>
<div class="progress progress-striped active"><!--progress-striped表示條紋進度條 active表示動態條紋進度條-->
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<div class="progress">
     <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div> 
<div class="progress">
 	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div> 
<div class="progress">
 	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div> 
<h5>正常層疊進度條</h5><!--正常進度條之和不能大於100%，否則會出現不良效果層疊進度條-->
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div> 
<h2>帶Label的進度條</h2>
<h5>進度條1</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  
<h5>進度條2</h5> 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

4、媒體物件

a、預設媒體物件

 <div class="media"><!--media表示媒體對像的容器,用來容納媒體物件的所有內容-->
        <a class="pull-left" href="#"><!--pull-left用來實現圖片居左。pull-right實現圖片居右-->
        	<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="..."><!--media-objec表示媒體物件中的物件，常常是圖片-->
      	</a>
      	<div class="media-body"><!--media-body表示媒體對像中的主體內容，可以是任何元素，常常是圖片側邊內容-->
        	<h4 class="media-heading">系列：十天精通CSS3</h4><!--media-heading表示物件的一個標題-->
        	<div>全方位深刻詳解CSS3模組知識，經典案例分析，程式碼同步除錯，讓網頁穿上絢麗裝備！</div>
      	</div>
    </div>

b、媒體物件的巢狀

<div class="media">
    <a class="pull-left" href="#">
		<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
	</a>
	<div class="media-body">
		<h4 class="media-heading">我是站長</h4>
		<div>我是站長damanyao，我在寫Bootstrap框中的媒體物件測試用例</div>
		<div class="media">
			<a class="pull-left" href="#">
				<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
			</a>
			<div class="media-body">
				<h4 class="media-heading">我是站長</h4>
				<div>我是站長damanyao，我在寫Bootstrap框中的媒體物件測試用例</div>
				<div class="media">
					<a class="pull-left" href="#">
						<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
					</a>
					<div class="media-body">
						<h4 class="media-heading">W3cplus</h4>
						<div>網上還有很多教程，請自己查詢....</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

c、媒體物件列表

<li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">我是站長</h4>
            <div>我是站長damanyao，我在寫Bootstrap框中的媒體物件測試用例</div>
        </div>
 </li>
 <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">我是站長</h4>
            <div>我是站長damanyao，我在寫Bootstrap框中的媒體物件測試用例</div>
        </div>
 </li>
</ul>

5、列表組

a、基礎列表組 注意：class="badge"表示帶徽章的列表組；list-group-item-success|info|warning|danger表示不同顏色的列表組

  <ul class="list-group">
        <li class="list-group-item">
    	    <span class="badge">456</span> <!--class="badge"表示帶徽章的列表組-->
        揭開CSS3的面紗
        </li>
        <li class="list-group-item">
	       <a href="##">CSS3邊框</a> <!--這是一個帶連結的列表組-->
        </li>
    </ul>

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
	<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
	<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>W3C</a>
	<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
	<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

b、自定義列表組 注意：我們通常用list-group-item-heading：用來定義列表項頭部樣式、list-group-item-text：用來定義列表項主要內容 active表示當前狀態 disabled表示禁用狀態

<div class="list-group">
    <a href="##" class="list-group-item active">
      <h4 class="list-group-item-heading">Canvas繪圖詳解<span class="badge">12</span></h4>
      <p class="list-group-item-text">本+課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》，在大家對Canvas繪圖有一定了解的基礎上......</p>
    </a>
    <a href="##" class="list-group-item disabled">
      <h4 class="list-group-item-heading">玩轉Bootstrap<span class="badge">30</span></h4>
      <p class="list-group-item-text">Bootstrap框架是一個非常受歡迎的前端開發框架，他能讓後端程式設計師和不懂設計的前端人員製作出優美的Web頁面或Web應用程式。            </p>
    </a>
    <a href="##" class="list-group-item">
      <h4 class="list-group-item-heading">基於bootstrap的網頁開發<span class="badge">5</span></h4>
      <p class="list-group-item-text">Bootstrap是用於前端開發的工具包，提供了優雅的HTML和CSS規範，並基於jQuery開發了豐富的Web元件。課程介紹了Bootstrap框架的基本知識，並基於Bootstrap框架...            </p>
    </a>
</div>

6、面板

注意：我們一般用 panel-heading用來設定面板頭部樣式， panel-footer用來設定面板尾部樣式，panel-body用來設定主體部分；panel-default|primary|success|info|warning|danger表示不同顏色的面板

  <div class="panel panel-default">
        <div class="panel-heading">中美決戰第一槍打響</div>
        <div class="panel-body">世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>
    <div class="panel panel-primary">
    	<div class="panel-heading">中美決戰第一槍打響</div>
    	<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>
    <div class="panel panel-success">
    	<div class="panel-heading">中美決戰第一槍打響</div>
    	<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>
    <div class="panel panel-info">
    	<div class="panel-heading">中美決戰第一槍打響</div>
    	<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>
    <div class="panel panel-warning">
    	<div class="panel-heading">中美決戰第一槍打響</div>
    	<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>
    <div class="panel panel-danger">
    	<div class="panel-heading">中美決戰第一槍打響</div>
    	<div class="panel-body">世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>

面板的巢狀表格

   <div class="panel panel-default">
        <div class="panel-heading">中美決戰第一槍打響</div>
    	<div class="panel-body">
    		<p>世界貿易組織11日向成員提供的檔案顯示，由於美方沒有采取實質行動糾正其對華產品實施的多項違規反傾銷措施，中方已向世貿組織申請授權對美實施每年約70億美元的貿易報復。
    		</p>
    		<table class="table table-bordered">
    			<thead>
    				<tr>
    					<th>＃</th>
    					<th>我的新聞</th>
    					<th>釋出時間</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>1</td>
    					<td>中美決戰</td>
    					<td>2018-09-18</td>
    				</tr>
    			</tbody>
    			
    		</table>
    	</div>
    	<div class="panel-footer">作者：大蠻腰</div>
    </div>

面板中巢狀列表

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
	<div class="panel-body">
		<p>詳細講解了選擇器、邊框、背景、文字、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字型等主題下涵蓋的所有CSS3新特性
		</p>
		<ul class="list-group">
			<li class="list-group-item">我是列表項</li>
			<li class="list-group-item">我是列表項</li>
			<li class="list-group-item">我是列表項</li>
		</ul>
	</div>
	<div class="panel-footer">作者：大漠</div>
</div>

相關推薦

bootstrap基礎介紹（二）

一、下拉選單 注意：我們通常用.pull-right使按鈕選單內容右對齊 ，class="disabled"表示禁用狀態，class="active"表示當前狀態 <div class="dropdown"> <button class="

深度學習數學基礎介紹（二）概率與數理統計

特征 數字特征 抽樣分布 第5章 最大 中心 3.4 獨立 知識 第1章 隨機事件與概率§1.1 隨機事件§1.2 隨機事件的概率§1.3 古典概型與幾何概型§1.4 條件概率§1.5 事件的獨立性 第2章 隨機變量的分布與數字特征§2.1 隨機變量及其分布§2.2 隨機變

bootstrap基礎介紹（一）

一、文字 標題： <h1>~<h6>/*逐漸字型大小由36px 30px 24px 18px 14px 12px*/ <small></small>/*副標題*/ 強調內容:（,.lead）

BootStrap基礎——排版（二）

程式碼 本節內容相對來說比較簡單，一般在個人部落格上使用的較為頻繁，用於顯示程式碼的風格。在Bootstrap主要提供了三種程式碼風格： 1、使用<code></code>來顯示單行內聯程式碼 2、使用<pre><

C# 基礎知識系列- 13 常見類庫介紹（二）日期時間類

# 0. 前言 上一篇內容介紹了Console類和Math類，這篇內容著重介紹一下C#中時間日期的處理方式。 > 上一篇勘誤： 上一篇中關於靜態類沒有建構函式，這一表述有誤。正確的說法是C#中靜態類不包含常規建構函式，但可以新增一個靜態建構函式。 > 靜態建構函式與普通普通建構函式的區別是，靜態

DNS服務器介紹（二）——主從復制和區域轉發

dns;區域轉發;主從復值背景介紹實際環境中為了避免單點故障，DNS服務器是由一組服務器組成每一個服務器上都有若幹個區域，不同服務器上的相同區域分為主和從兩種角色。由於正向和反向是不同的區域，所以多臺服務器間的相同區域可以互為主從或者一主多從，本處以右圖為例進行演示。DNS服務器的主從復制1.之前已經在172

集成CCFlow工作流與GPM的辦公系統馳騁CCOA介紹（二）

崗位 mes 顯示 ccf 辦公 人員 文件 ron min GPM怎樣控制菜單權限以及菜單的增刪顯示 因為CCOA中僅僅有屬於admin才幹夠進行權限管理與流程設計。password為pub。 1.加入CCOA功能菜單 進入GPM後，找到編號為CCOA的信

webpack基礎使用（二）

-- pts nbsp port pat string類 abp dirname pac webpack.config.js文件的配置：輸入：module.exports={

Mongodb基礎實踐（二）

數據庫查詢 表達式 where 技術 文章 在前面的文章裏面主要介紹了MongoDB的文檔，集合，數據庫等操作和對文檔的增、刪、改相關知識，接下來會總結一點有關查詢的相關知識。 在MySQL中,我們知道數據查詢是優化的主要內容，讀寫分離等技術都是可以用來處理數據庫查詢優化的，足以見數

Struts2入門介紹（二）

輸入 clu ons dom 訪問路徑 訪問 filter pri locale 一、Struts執行過程的分析。 　　當我們在瀏覽器中輸入了網址http://127.0.0.1:8080/Struts2_01/hello.action的時候，Struts2做了如下過程：

Dji Mobile SDK 基礎實現（二）

stat one 透傳 pub != exceptio rom tick ann Dji Mobile SDK 基礎實現（二） 本文簡要介紹如何通過調用DJI Mobile SDK，實現獲取和釋放無人機的控制權限、模擬遙控器按鈕控制無人機的飛行、獲取無人機的回傳視頻、獲取

上門洗車APP --- Androidclient開發 之 網絡框架封裝介紹（二）

glob imp success rgb sed error margin p s 再次 上門洗車APP --- Androidclient開發 之 網絡框架封裝介紹（二）前幾篇博文中給大家介紹了一下APP中的基本業務及開發本項目使用的網絡架構：上門洗車APP ---

Spring MVC 框架結構介紹（二）

指定 let url 16px () isp -s 一個 ping Spring MVC框架結構 　　 Spring MVC是圍繞DispatcherServlet設計的，DispatcherServlet向處理程序分發各種請求。處理程序[email prot

RobotFramework自動化測試框架的基礎關鍵字（二）

速查 語言 left 自動化 logs python語言 添加 src bsp 1.1.1 如何快速查詢某一個關鍵字的API說明 鼠標選中我們關鍵字，同時按住Ctrl+Alt鍵，即可出來該關鍵字的幫助API以及使用示例 1.1.2 如何快速補全

Bootstrap 插件（二）

存在 初始 code 更新 菜單 png ade pdo 匹配 1.Bootstrap 下拉菜單（Dropdown）插件 Bootstrap 下拉菜單 這一章講解了下拉菜單，但是沒有涉及到交互部分，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件，您可以向

HTML5基礎小結（二）——標簽小例

加速 支持 ide oat enter controls 畫圓 side tint 隨篇博客的思維導圖。繼續： 二。看下標簽的使用，這裏看幾個小樣例（效果圖不再給出）： 1。結構標簽的使用，這裏來看一個頁面的布局：<!doc

JavaScript基礎知識（二）

window ttr demo1 隨機數 put 意義 成員 poi pac 一、JavaScript事件詳解 1、事件流：描述的是在頁面中結束事件的順序 事件傳遞有兩種方式：冒泡與捕獲。 　 事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插

python基礎知識（二）

.py .com 數值類型 spa gbk 4.5 wal 編碼 nic 1.pycharm使用 快速搜索欄，蠻重要的 2.字符串格式化 %s 字符串類型 %d數值類型 msg = "我是%s,年齡%d,愛好%s" % (‘alex‘, 18, ‘boy‘) print(

.NET基礎知識（二）

處理 read 不能被繼承 c# 方法表 .net基礎 arr 如果 數據 1、new有幾種用法？ 答：1、new Class(); 2、覆蓋方法，public new XXXX(); 3、new() 約束指定泛型類聲明中的任何類型參數都必須有公共的無參數構造函數 2

Wireshark使用介紹（二）：應用Wireshark觀察基本網絡協議

使用 額外 傳輸過程 直接 nal http協議 ges log 傳輸 TCP: TCP/IP通過三次握手建立一個連接。這一過程中的三種報文是：SYN，SYN/ACK，ACK。 第一步是找到PC發送到網絡服務器的第一個SYN報文，這標識了TCP三次握手的開始。