Pure.CSS - คู่มือฉบับย่อ

Pure เป็น Cascading Style Sheet (CSS) ที่พัฒนาโดย YAHOO ช่วยในการสร้างเว็บไซต์ที่รวดเร็วสวยงามและตอบสนอง

คุณสมบัติเด่นบางประการมีดังนี้ -

  • การออกแบบที่ตอบสนองในตัว
  • CSS มาตรฐานที่มีพื้นที่น้อยที่สุด
  • ชุดโมดูล CSS ขนาดเล็กที่ตอบสนอง
  • ใช้งานได้ฟรี

การออกแบบที่ตอบสนอง

Pure มีการออกแบบที่ตอบสนองในตัวซึ่งเว็บไซต์ที่สร้างโดยใช้ Pure จะออกแบบตัวเองใหม่ตามขนาดอุปกรณ์ Pure มีตารางของเหลวสำหรับอุปกรณ์เคลื่อนที่เป็นอันดับแรก 12 คอลัมน์ที่รองรับคลาสที่ตอบสนองสำหรับขนาดหน้าจอขนาดเล็กใหญ่และกลาง

คลาสบริสุทธิ์ถูกสร้างขึ้นเพื่อให้เว็บไซต์สามารถพอดีกับขนาดหน้าจอใดก็ได้ เว็บไซต์ที่สร้างโดยใช้ Pure เข้ากันได้กับพีซีแท็บเล็ตและอุปกรณ์มือถือ

CSS มาตรฐาน

Pure ใช้ CSS มาตรฐานเท่านั้นและเรียนรู้ได้ง่ายมาก ไม่มีการพึ่งพาไลบรารี JavaScript ภายนอกใด ๆ เช่น jQuery

ขยายได้

Pure คือการออกแบบที่เรียบง่ายและเรียบง่าย ได้รับการออกแบบโดยคำนึงถึงความจริงที่ว่าการเพิ่มกฎ CSS ใหม่นั้นง่ายกว่าการเขียนทับกฎ CSS ที่มีอยู่ ด้วยการเพิ่ม CSS ไม่กี่บรรทัดรูปลักษณ์ของ Pure สามารถปรับแต่งให้ทำงานกับโครงการเว็บที่มีอยู่ได้

รองรับแสงเงาและสีจัดจ้าน สีและเฉดสียังคงสม่ำเสมอในแพลตฟอร์มและอุปกรณ์ต่างๆ และที่สำคัญที่สุดคือใช้งานได้ฟรีอย่างแน่นอน

มีสองวิธีในการใช้ Pure -

  • Local Installation - คุณสามารถดาวน์โหลดไฟล์ pure.css บนเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ

  • CDN Based Version - คุณสามารถรวมไฟล์ pure.css ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

  • ไปที่ https://purecss.io/start/ เพื่อดาวน์โหลดเวอร์ชันล่าสุดที่มี

  • วางไฟล์ pure-min.css ที่ดาวน์โหลดไว้ในไดเร็กทอรีของเว็บไซต์ของคุณเช่น / css

ตัวอย่าง

คุณสามารถรวมไฟล์ css ไฟล์ในไฟล์ HTML ของคุณดังนี้ -

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
	  
   </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เวอร์ชันที่ใช้ CDN

คุณสามารถรวมไฟล์ pure.css ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN) yui.yahooapis.com ให้เนื้อหาสำหรับเวอร์ชันล่าสุด

เรากำลังใช้ไลบรารีเวอร์ชัน CDN ของ yui.yahooapis.com ตลอดบทช่วยสอนนี้

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างข้างต้นใหม่โดยใช้ pure.css จาก PureCSS.io CDN

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }
      </style>
   </head>
  
   <body>
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3"><p>First Column</p></div>
            <div class = "pure-u-1-3"><p>Second Column</p></div>
            <div class = "pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Pure.CSS มีคลาสพิเศษมากมายเพื่อสร้างการออกแบบที่ตอบสนอง

ซีเนียร์ ชื่อชั้นเรียนและคำอธิบาย
1

.pure-u-*

ตั้งค่าคอนเทนเนอร์ให้ใช้พื้นที่ที่ต้องการบนอุปกรณ์ใด ๆ
2

.pure-u-sm-*

ตั้งค่าคอนเทนเนอร์ให้ใช้พื้นที่ที่ต้องการบนอุปกรณ์ที่มีความกว้าง≥ 568px
3

.pure-u-md-*

ตั้งค่าคอนเทนเนอร์ให้ใช้พื้นที่ที่ต้องการบนอุปกรณ์ที่มีความกว้าง≥ 768px
4

.pure-u-lg-*

ตั้งค่าคอนเทนเนอร์ให้ใช้พื้นที่ที่ต้องการบนอุปกรณ์ที่มีความกว้าง≥ 1024px
5

.pure-u-xl-*

ตั้งค่าคอนเทนเนอร์ให้ใช้พื้นที่ที่ต้องการบนอุปกรณ์ที่มีความกว้าง≥ 1280px

ในตัวอย่างต่อไปนี้เราจะสร้างตารางตอบสนองโดยมีแถวที่มีสี่คอลัมน์ คอลัมน์ควรซ้อนกันบนหน้าจอขนาดเล็กควรใช้ความกว้าง: 50% สำหรับหน้าจอขนาดกลางและควรใช้ความกว้าง: 25% สำหรับหน้าจอขนาดใหญ่

ซึ่งทำได้โดยการเพิ่ม .pure-u-1 คลาสสำหรับหน้าจอขนาดเล็ก .pure-u-md-1-2 สำหรับหน้าจอขนาดกลางและ .pure-u-lg-1-4สำหรับหน้าจอขนาดใหญ่ ปรับขนาดหน้าเพื่อดูการตอบสนองของตารางตามขนาดหน้าจอ

ตัวอย่าง

purecss_responsive_design.htm

<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;			
         }	 
      </style>
   </head>
   <body> 
   
      <div class = "grids-example">       	  
         <div class = "pure-g">
            <div class = "pure-u-1-1">
               <div class = "graybox">
                  <p>These four columns should stack on small screens, 
                  should take up width: 50% on medium-sized screens, and should 
                  take up width: 25% on large screens.</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>First Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Second Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Third Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>Fourth Column</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1">
               <div class = "graybox">
                   <p>This column is to occupy the complete space of a row.</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-2-5">
               <div class = "graybox">
                  <p>This column is to occupy the two-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-3-5">
               <div class = "graybox">
                  <p>This column is to occupy the three-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>   
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 2: This column is to occupy the one-third of the space 
                     of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 3: This column is to occupy the one-third of the space of a 
                     row on all devices.</p>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Pure.CSS ให้แนวคิดของ Pure Grid ด้วยคลาสสองประเภท pure-gคลาสกริดและคลาสยูนิต pure-u-*. ต่อไปนี้เป็นกฎในการใช้ Pure Grids

  • ความกว้างของหน่วยเป็นเศษส่วน ตัวอย่างเช่น pure-u-1-2 หมายถึงความกว้าง 1/2 หรือ 50% pure-u-2-5 หมายถึงความกว้าง 2/5 หรือ 40% เป็นต้น

  • ต้องใช้ Children of Pure Grid (องค์ประกอบที่มีคลาส pure-g) pure-u หรือ pure-u-* ชื่อชั้น

  • เนื้อหาทั้งหมดควรเป็นส่วนหนึ่งของหน่วยกริดเพื่อให้แสดงผลได้อย่างถูกต้อง

ขนาดหน่วยกริด

Pure Grid มาพร้อมกับยูนิตขนาดที่ 5 และ 24 ภาพประกอบต่อไปนี้แสดงตัวอย่างของหน่วยที่มีอยู่ซึ่งสามารถต่อท้ายได้pure-ui-. ตัวอย่างเช่นในการสร้างเซลล์ที่มีความกว้าง 50% คุณสามารถใช้สไตล์ csspure-ui-1-2.

5 THตามหน่วย

purecss_5th_based.htm

<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class="grids-example">       	  
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">2-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-2-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">3-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-3-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">4-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-4-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

24 THหน่วยจาก

purecss_24th_based.htm

<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class = "grids-example">       	  
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-24</div>
            <div class = "grid-unit-details pure-u-1">
			      <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-12</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-12"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">2-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-2-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">3-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-3-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-8</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-8"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">4-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-4-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-6</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-6"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">5-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-5-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-4</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-4"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">6-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-6-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">7-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-7-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-3</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-3"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">22-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-22-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">23-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-23-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1</div>
            <div class ="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">24-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-24-24"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Pure.CSS มี CSS ที่สวยงามและตอบสนองสำหรับการออกแบบฟอร์ม ใช้ CSS ต่อไปนี้ -

ซีเนียร์ ชื่อชั้นเรียนและคำอธิบาย
1

pure-form

แสดงรูปแบบอินไลน์ที่กะทัดรัด
2

pure-form-stacked

แสดงถึงรูปแบบที่ซ้อนกันโดยมีองค์ประกอบการป้อนข้อมูลด้านล่างป้ายกำกับ เพื่อใช้กับรูปแบบบริสุทธิ์
3

pure-form-aligned

แสดงถึงรูปแบบที่สอดคล้องกับองค์ประกอบการป้อนข้อมูลด้านล่างป้ายชื่อ เพื่อใช้กับรูปแบบบริสุทธิ์
4

pure-input-rounded

แสดงตัวควบคุมฟอร์มที่มีมุมโค้งมน
5

pure-button

ทำให้ปุ่มสวยงาม
6

pure-checkbox

ทำให้ช่องทำเครื่องหมายสวยงาม
7

pure-radio

ทำให้วิทยุสวยงาม

ตัวอย่าง

purecss_forms.htm

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <form class = "pure-form pure-form-aligned">
         <fieldset>
            <div class = "pure-control-group">      
               <label for = "name">Username</label>
               <input id = "name" type = "text" placeholder = "Username" required>
            </div>
			
            <div class = "pure-control-group"> 
               <label for = "email">Email</label>
               <input id = "email" type = "text" placeholder = "Email Address" required>       
            </div>
			
            <div class = "pure-control-group">   
               <label for = "comments">Comments</label>
               <input id = "comments" type="text" placeholder = "Comments">       
            </div>
			
            <div class = "pure-controls">
               <label  for = "married" class = "pure-checkbox">
                  <input id = "married" type = "checkbox" checked = "checked">
                  Married
               </label>
               <br>
			   
               <label  for = "single" class = "pure-checkbox">
                  <input id = "single" type = "checkbox">
                  Single
               </label>
               <br>
			   
               <label for = "dontknow" class = "pure-checkbox">
                  <input id = "dontknow" type = "checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
			
            <div class = "pure-controls">
               <label for = "male" class = "pure-radio">
                  <input id = "male" type = "radio" name = "gender" value = "male" checked>
                  Male
               </label>
               <br>
			   
               <label for = "female" class= "pure-radio">
                  <input id = "female" type = "radio" name = "gender" value = "female">
                  Female
               </label>
               <br>
			   
               <label for = "dontknow1" class = "pure-radio">
                  <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
                  Don't know (Disabled)
               </label>
               <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
			   
            </div>
         </fieldset>
      </form>       
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Pure.CSS มี CSS ที่สวยงามและตอบสนองสำหรับการปรับแต่งรูปลักษณ์ของปุ่ม ใช้ CSS ต่อไปนี้ -

ซีเนียร์ ชื่อชั้นเรียนและคำอธิบาย
1

pure-button

แสดงถึงปุ่มมาตรฐาน สามารถใช้เพื่อจัดรูปแบบลิงก์และปุ่มได้เช่นกัน
2

pure-button-disabled

แสดงปุ่มปิดใช้งาน เพื่อใช้ร่วมกับปุ่มเพียว
3

pure-button-active

แสดงถึงปุ่มที่กด เพื่อใช้ร่วมกับปุ่มเพียว

ตัวอย่าง

purecss_buttons.htm

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <style>
         .success,
         .error,
         .warning,
         .secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
         }
         
         .success {
            background: rgb(28, 184, 65); /* green */
         }

         .error {
            background: rgb(202, 60, 60); /* maroon */
         }

         .warning {
            background: rgb(223, 117, 20); /* orange */
         }

         .secondary {
            background: rgb(66, 184, 221); /* light blue */
         }

         .xsmall {
            font-size: 70%;
         }

         .small {
            font-size: 85%;
         }

         .large {
            font-size: 110%;
         }

         .xlarge {
            font-size: 125%;
         }
      </style>	  	  
   </head>
	
   <body> 
      <h2>Standard Buttons</h2>
      <button class = "pure-button">Click Me</button>
      <button class = "pure-button pure-button-active">Click Me</button>
      <button class = "pure-button pure-button-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class = "pure-button">Link</a>
      <a class = "pure-button pure-button-active">Link</a>
      <a class = "pure-button pure-button-disabled">Disabled Link</a>

      <h2>Primary Button</h2>
      <a class = "pure-button pure-button-primary">Submit</a>    

      <h2>Customized button</h2>
      <button class = "pure-button success">Success</button>
      <button class = "pure-button error">Error</button>
      <button class = "pure-button warning">Warning</button>
      <button class = "pure-button secondary">Secondary</button>
	  
      <h2>Different Sized button</h2>
      <button class = "pure-button xsmall">Extra Small</button>
      <button class = "pure-button small">Small</button>
      <button class = "pure-button large">Large</button>
      <button class = "pure-button xlarge">Extra Large</button>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Pure.CSS สามารถใช้เพื่อแสดงตารางประเภทต่างๆโดยใช้รูปแบบต่างๆบนตารางบริสุทธิ์

ซีเนียร์ ชื่อชั้นเรียนและคำอธิบาย
1

pure-table

แสดงตารางพื้นฐานที่มีช่องว่างภายในเริ่มต้นเส้นขอบและส่วนหัวที่เน้น
2

pure-table-bordered

วาดตารางที่มีเส้นขอบข้ามแถว
3

pure-table-horizontal

วาดตารางด้วยเส้นแนวนอน
4

pure-table-striped

แสดงตารางที่ถูกปล้น
5

pure-table-odd

หากนำไปใช้กับ tr อื่น ๆ ให้เปลี่ยนพื้นหลังของแถวและสร้างเอฟเฟกต์สไตล์ม้าลาย

ตัวอย่าง

purecss_tables.htm

<html>
   <head>
      <title>The PURE.CSS Tables</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
	  
      <table class = "pure-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><
               th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Stripped Table</h3>
      <table class = "pure-table pure-table-striped">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Pure.CSS มีตัวเลือกในการแสดงภาพในรูปแบบที่ตอบสนองโดยใช้ภาพที่บริสุทธิ์เป็นคลาสหลัก

ซีเนียร์ ชื่อชั้นเรียนและคำอธิบาย
1

pure-img

แสดงภาพสไตล์พื้นฐานที่ไม่มีขอบ รูปภาพจะขยายและลดขนาดโดยที่เนื้อหาคงไว้ซึ่งอัตราส่วนที่ถูกต้อง

ตัวอย่าง

purecss_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width=device-width, initial-scale=1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Images Demo</h2>
      <hr/> 
      <div class = "pure-g">	
	  
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
      </div>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

Pure.CSS รองรับไลบรารีไอคอนยอดนิยมต่อไปนี้ -

  • ไอคอน Font Awesome
  • ไอคอนวัสดุของ Google
  • ไอคอน Bootstrap

การใช้งาน

ในการใช้ไอคอนให้วางชื่อของไอคอนในคลาสขององค์ประกอบ <i> HTML

ตัวอย่าง

purecss_icons.htm

<html>
   <head>
   
      <title>The PURE.CSS Icons</title>
	  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
	  
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	  
      <link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
	  
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	  
      <style>  
         .xsmall {
            font-size: 70%;
         }
         .small {
            font-size: 85%;
         }
         .large {
            font-size: 110%;
         }
         .xlarge {
            font-size: 125%;
         }
      </style>
	  
   </head>
   
   <body> 
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud xsmall"></i>
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud large"></i>
      <i class = "fa fa-cloud xlarge"></i>
	  
      <h3>Google Material Design Icon Demo</h3>      
      <i class = "material-icons xsmall">cloud</i>	
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons large">cloud</i>
      <i class = "material-icons xlarge">cloud</i>
      <i class = "material-icons">cloud</i>
	  
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud xsmall"></i>
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>
      <i class = "glyphicon glyphicon-cloud xlarge"></i>
	  
      <h3>Button with Icon Demo</h3>
      <button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
      <a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
   </body>
</html>

ผลลัพธ์

ตรวจสอบผลลัพธ์

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved