با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته به آموزش طراحی ریسپانسیو در Pure CSS پرداختیم. این دوره را با آموزش کار با گریدها در Pure CSS ادامه می دهیم.
Pure.CSS مفهوم Pure Grid را با دو نوع کلاس، pure-g، یک کلاس شبکه و کلاس های واحد، pure-u- * فراهم می کند.
عرض واحد ها در تقسیم بندی مهم هستند.
به عنوان مثال، pure-u-1-2 نشان دهنده ۱/۲ یا ۵۰٪ عرض است.
pure-u-2-5 نیز نشان دهنده عرض ۲/۵ یا ۴۰٪ و غیره است.
Children های گرید در Pure (عنصر با کلاس pure-g) باید از نامهای کلاس pure-u یا pure-u- * استفاده کنند.
Pure Grid دارای اندازه های ۵ و ۲۴ می باشد.
تصاویر زیر نمونه از برخی از واحدهای موجود را نشان می دهد که می تواند به pure-ui- اضافه شود. برای مثال، برای ایجاد یک سلول با عرض ۵۰٪، می توانید از یک CSS pure-ui-1-2 استفاده کنید.
purecss_5th_based.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <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> |
نتیجه را تأیید کنید.
purecss_24th_based.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <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 به علاقمندان این دوره ارائه گردید.
در این جلسه آموختیم که Pure.CSS مفهوم Pure Grid را با دو نوع کلاس، pure-g، یک کلاس شبکه و کلاس های واحد، pure-u- * فراهم می کند.
عرض واحد ها در تقسیم بندی مهم هستند.
به عنوان مثال، pure-u-1-2 نشان دهنده ۱/۲ یا ۵۰٪ عرض است.
pure-u-2-5 نیز نشان دهنده عرض ۲/۵ یا ۴۰٪ و غیره است.
در جلسه بعدی به کار با فرم ها در Pure.CSS خواهیم پرداخت.
با پی وی لرن همراه باشید.