Khmer Web: តួគេហទំព័រ

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="en">
<head>

   <data:blog.pageTitle/>

<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/css?family=Sriracha|Playball|Merienda+One|Bokor|Bayon|Koulen|Moul|Nokora|Hanuman|Metal' rel='stylesheet'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<b:skin>
<![CDATA[
/*ការរចនាចាប់ផ្តើមទីនេះ*/
*{
  padding:0;
  margin:0;
}
.header-wrapper{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index:999;
}
.header{
  color:grey;
  background:#f2f2f2;
  padding:15px 20px;
}
.header h1{
  font:20px/1.5 Koulen;
  margin-bottom:0;
}
.kb-navbar{
  background:#17a2b8;
}
.kb-navbar .navbar-brand{
  color:white !important;
  font:18px/1.5 Bokor;
}
.kb-navbar .nav-link{
  font:16px/1.5 Nokora;
  color:#e6e6e6 !important;
}
.kb-navbar .nav-link:hover{
  color:white !important;
}
.post-wrapper,.sidebar-wrapper{
  padding:10px;
}
.post-body,.sidebar{
  background:#f2f2f2;
  height:400px;
}
/*ចុងបញ្ចប់នៃការរចនា*/
]]>
</b:skin>
</head>

<body>







  
  គេហទំព័រយើង 

 


  ទំព័រដើម
  
  
    
      
        តំណរ
      
      
        តំណរ
      
      
        តំណរ
          
    
    





  
    
      
    
    
      
    
  





</body>
</html>

ពិនិត្យគេហទំព័រជាក់ស្តែងៈ https://webdesign-kh.blogspot.com/

នៅបន្ទាត់លេខ 97 ការសរសេរថា <div class="container" style="margin-top:20px"> គឺជាការបង្កើតតួគេហទំព័រមួយស្ថិតនៅក្នុងថ្នាក់ឬមានប្រភេទជា «container» ។

នៅក្នុងកញ្ចប់ Bootstrap គ្រប់ធាតុ HTML ទាំងឡាយដែលស្ថិតក្នុងថ្នាក់ឬមានប្រភេទជា «container» មានប្រវែងទទឹងមិនពេញអេក្រង់នៃឧបករណ៍អេឡិចត្រូនិកនោះទេ គឺមានចន្លោះខ្លះនៅសងខាងធាតុនោះ។ តែបើយើងចង់អោយធាតុ HTML ណាមួយមានប្រវែងពេញអេក្រង់តែម្តង យើងត្រូវបង្កើតវាក្នុងថ្នាក់ឬមានប្រភេទជា «container-fluid» ។

ម៉្យាងទៀត យោងតាមក្បូនខ្នាតក្នុងកញ្ចប់ Bootstrap គ្រប់ធាតុ HTML ទាំងអស់ដែលមានប្រភេទជា «container» ឬ «container-fluid» អាចត្រូវចែកជា 12 ផ្នែកឬ 12 ក្រឡាស្មើៗគ្នា។ ហើយការចែកជា 12 ក្រឡាឬមិនចែក គឺអាស្រ័យលើយើងជាអ្នកកំណត់ អនុលោមទៅតាមឧបករណ៍អេឡិចត្រូនិក។

ឧបមាថា យើងចង់អោយការចែកជា 12 ក្រឡានេះ អាចត្រូវធ្វើឡើងតែចំពោះឧបករណ៍អេឡិចត្រូនិកដែលអេក្រង់របស់វាមានទំហំចាប់ពី 576px តែប៉ុណ្ណោះ។ ក្នុងករណីនេះ យើងចាំបាច់ត្រូវបង្កើតធាតុ HTML មួយស្ថិតក្នុងថ្នាក់ «row» ដែលនៅក្នុងនោះត្រូវមានធាតុ HTML មួយទៀតស្ថិតក្នុងថ្នាក់ «col-sm-*» ។ ធាតុទាំងនោះត្រូវស្ថិតនៅក្នុងធាតុ HTML ដែលមានថ្នាក់ជា «container» ឬ «container-fluid» ។

ជាក់ស្តែង នៅលើបន្ទាត់លេខ 99 នៅក្នុងកម្មវិធីខាងលើ ការសរសេរថា <div class="col-sm-9 post-wrapper"> គឺជាការបង្កើតធាតុ HTML ដែលជា div មួយមានប្រវែងចំនួន 9 ក្រឡានៅក្នុងឧបករណ៍អេឡិចត្រូនិកមានអេក្រង់មានទំហំចាប់ពី 576px ដែលត្រូវតាងដោយ «sm» ។

ចំណែកឯនៅលើបន្ទាត់លេខ 102 វិញ ការសរសេរថា <div class="col-sm-3 sidebar-wrapper"> គឺជាការបង្កើតធាតុ HTML ដែលជា div មួយទៀតមានប្រវែងចំនួន 3 ក្រឡានៅក្នុងឧបករណ៍អេឡិចត្រូនិកមានអេក្រង់មានទំហំចាប់ពី 576px ដែលត្រូវតាងដោយ «sm» ។

ជាទូទៅ ទំហំអេក្រង់របស់ឧបករណ៍អេឡិចត្រូនិកត្រូវតាងដោយអក្សរមួយចំនួនដូចខាងក្រោមនេះ៖

col-* សំរាប់អេក្រង់តូចជាង 576px ដែលជាទូទៅជាទូរស័ព្ទដៃ។
col-sm-* សំរាប់អេក្រង់មានទំហំចាប់ពី 576px ដែលជាទូទៅរាប់ចាប់ពី iPad ឡើងទៅ។
col-md-* សំរាប់អេក្រង់មានទំហំចាប់ពី 768px ដែលជាទូទៅរាប់ចាប់ពីកំព្យូទ័រយួរដៃឡើងទៅ។
col-lg-* សំរាប់អេក្រង់មានទំហំចាប់ពី 992px ដែលជាទូទៅរាប់ចាប់ពីកំព្យូទ័រធំលើតុឡើងទៅ។
col-xl-* សំរាប់អេក្រង់មានទំហំចាប់ពី 1200px ដែលជាទូទៅរាប់ចាប់ពីកំព្យូទ័រធំលើតុឡើងទៅ។

គេហទំព័រ​យើង

គេហទំព័រយើង