الدرس الثاني : قالب بلوجر متجاوب بسيط

في هذا الدرس، سوف نستخدم هذا القالب البسيط والذي يتميز بخصائص البوتوستراب، وهي التقسيمات العمودية والمتجاوبة مع الاجهزة، هذا القالب مهم جدا كونه يتوافق مع جميع الاجهزة
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:render='true' b:responsive='true' b:templateUrl='https://www.jettheme.com' b:templateVersion='2.9' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>
  
  
<head>
   <meta content='width=device-width, initial-scale=1' name='viewport'/>

  
  <!--bootstrap css basic-->
  <style>
    
    
  html{font-family: 'Noto Naskh Arabic', serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;scroll-behavior: smooth;} 
  *, ::after, ::before { box-sizing: border-box; font-family: 'Readex Pro', sans-serif; }
  body{margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.7; color: #212529;  background-color: #fff;word-break: break-word;}
div,li, a, p,span{text-transform: capitalize;}
 
   /*container*/
.container { width: 90%; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; }
  

  
/*container*/
  /*row*/
.row {  display: flex;  flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
/*row*/
  
/*col*/ 
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10{position: relative; width: 100%; padding-left: 10px; padding-right: 10px;}
@media (min-width: 768px) {.col-1 {  flex: 0 0 10%; max-width: 10%; }}
  @media (min-width: 768px) {.col-2 {  flex: 0 0 20%; max-width: 20%; }}
  @media (min-width: 768px) {.col-3 {  flex: 0 0 30%; max-width: 30%; }}
  @media (min-width: 768px) {.col-4 {  flex: 0 0 40%; max-width: 40%; }}
  @media (min-width: 768px) {.col-5 {  flex: 0 0 50%; max-width: 50%; }}
  @media (min-width: 768px) {.col-6 {  flex: 0 0 60%; max-width: 60%; }}
  @media (min-width: 768px) {.col-7 {  flex: 0 0 70%; max-width: 70%; }}
  @media (min-width: 768px) {.col-8 {  flex: 0 0 80%; max-width: 80%; }}
  @media (min-width: 768px) {.col-9 {  flex: 0 0 90%; max-width: 90%; }}
  @media (min-width: 768px) {.col-10 {  flex: 0 0 100%; max-width: 100%; }}
/*col*/

</style> 
   <!--bootstrap css basic-->    
  
  
  
  
  
<b:skin><![CDATA[
]]></b:skin>
<b:template-skin><![CDATA[]]></b:template-skin>
</head>
<body>
  <div id="header">
  <!--navbar-->
  
  </div>
  <div class='container wrapper'>
<div class='row'>
  <div class='col-2'>
  <b:section class='R_sideBar' id='R_sideBar' showaddelement='yes'>
   
  </b:section>
  </div>
  <div class='col-6'>
   <b:section class='main' id='main' showaddelement='yes'>
   <b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'  visible='true'/>
   </b:section> 
  </div>
   <div class='col-2'>
  <b:section class='L_sideBar' id='L_sideBar' showaddelement='yes'>
   
  </b:section>
  </div>
    </div>
  </div>
  <div id="footer">
  <div id="social-media-account">
    <a href="" title="youtube"><!--icon--></a>
     <a href="" title="facebook"><!--icon--></a>
    <a href="" title="twitter"><!--icon--></a>
    
    </div>
  </div>

</body>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</html>
شارك المقال:
