layui架構學習（13：輔助元素）

  Layui官網教程中頁面元素的大部分内容都過了一遍，就剩下表單和輔助元素，由于表單的内容比較多，準備先把輔助元素的内容先學習了，再花幾篇文章學習并記錄表單樣式的設定方式。

  輔助元素主要包括引用塊、字段集區塊、橫線等三類元素的樣式設定。

  首先是引用塊。blockquote元素定義摘自另一個源的塊引用。Layui中支援兩種預設類以定義其樣式，一種為layui-elem-quote，另一種為layui-elem-quote layui-quote-nm。前面兩種預設類及未添加預設類的blockquote的樣式差别如下所示：

<div style="width: 400px;">
		<blockquote>
		有一分熱，發一分光，就令螢火一般，也可以在黑暗裡發一點光，不必等候炬火，此後如竟沒有炬火，我便是唯一的光。
		 <br>——魯迅
		</blockquote>
		<blockquote class="layui-elem-quote">
		有一分熱，發一分光，就令螢火一般，也可以在黑暗裡發一點光，不必等候炬火，此後如竟沒有炬火，我便是唯一的光。
		 <br>——魯迅
		</blockquote>
		<br />
		<blockquote class="layui-elem-quote layui-quote-nm">
		有一分熱，發一分光，就令螢火一般，也可以在黑暗裡發一點光，不必等候炬火，此後如竟沒有炬火，我便是唯一的光。
		 <br>——魯迅
		</blockquote>
	</div>
           

  接着是字段集區塊。fieldset可以将相關元素分組，并在相關元素周圍繪制邊框。Layui支援對字段集區塊設定兩種風格的樣式：預設風格和一般風格，前者采用預設類layui-elem-field，後者采用預設類layui-elem-field layui-field-title，同時字段集區塊内部包含兩部分内容，legend元素儲存的内容相當于分組名稱，而區塊内部的内容包裹在div元素内，且其使用預設類layui-field-box标記為内容區域。前面兩種預設類及未添加預設類的fieldset的樣式差别如下所示：

<div style="width: 400px;">
		<fieldset style="margin-top: 30px;">
		  <legend>引用區塊 - 未添加layui預設類</legend>
		  <div class="layui-field-box">
		      有一分熱，發一分光，就令螢火一般，也可以在黑暗裡發一點光，不必等候炬火，此後如竟沒有炬火，我便是唯一的光。
		  </div>
		</fieldset>	
		<fieldset class="layui-elem-field" style="margin-top: 30px;">
		  <legend>引用區塊 - 預設風格</legend>
		  <div class="layui-field-box">
		      有一分熱，發一分光，就令螢火一般，也可以在黑暗裡發一點光，不必等候炬火，此後如竟沒有炬火，我便是唯一的光。
		  </div>
		</fieldset>	
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>引用區塊 - 一般風格</legend>
		  <div class="layui-field-box">
		      有一分熱，發一分光，就令螢火一般，也可以在黑暗裡發一點光，不必等候炬火，此後如竟沒有炬火，我便是唯一的光。
		  </div>
		</fieldset>
	</div>
           

  最後是橫線，使用的是hr元素，通過使用不同的layui邊框顔色預設類，可以得到不同顔色的橫線，在此不再測試，有興趣的可以直接看Layui官網教程中的示例。

  

  

  

  

  

  

  

  

  

  

  

參考文獻：

[1]B站：layui架構精講全套視訊教程

[2]https://layui.gitee.io/v2/docs/

[3]https://layui.gitee.io/v2/demo/

[4]https://github.com/layui/layui/