با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم . به آشنایی با انواع فریم ورک های Responsive آماده ، برای طراحی Responsive ، قالب وب سایت بپردازیم. در مطالب آموزشی قبل ، تا حدودی با ویژگی Responsive ، و چگونگی استفاده از این ویژگی در صفحات وب، آشنا شدید. و همچنین Responsive کردن عناصر html مهم، ر ادر قالب وب سایت ارائه کردیم.
در آموزشهای بخش Responsive در css، به موضوعات مهم و کاربردی استفاده از تنظیمات viewport در css ، استفاده از grid-view در css ، responsive کردن عکس ها در css و همچنین چگونگی responsive کردن ویدئوها در css ،در طراحی قالب وب سایت پرداختیم.
در ادامه آموزشهای Responsive در css ، در این پست ، به آشنایی با انواع فریم ورک های Responsive آماده . برای Responsive کردن قالب وب سایت پرداخته ایم.
فریم ورک های آماده زیادی برای اعمال ویژگی Responsive. روی طراحی قالب وب سایت وجود دارد.
که هم رایگان بوده ، و هم باستفاده از آن ها آسان است.
در این پست ، ما به دو نمونه از معتبرترین و مهم ترین فریم ورک های Responsive قالب وب سایت ، اشاره کرده ایم.
یک راه عالی برای استفاده از Responsive در طراحی وب سایت ، استفاده از فریم ورک های نوع style sheet ، نظیر فریم ورک W3.CSS است.
این فرم ورک، برای توسعه سایت ها ، در هر اندازه ای در دستگاهای مختلف، مناسب است.
مثال:
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 | <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container w3-green"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="w3-third"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div class="w3-third"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </body> </html> |
فریم ورک مشهور دیگر ، Bootstrap است . این فریم ورک از HTML, CSS و jQuery . برای Responsive کردن. قالب وب سایت، استفاده می کند.
مثال:
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 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> </div> <div class="row"> <div class="col-sm-4"> ... </div> <div class="col-sm-4"> ... </div> <div class="col-sm-4"> ... </div> </div> </div> </body> </html> |
آماده کردن وب سایت های رسپانسیو با کدهای CSS بصورت دستی زمان زیادی خواهد برد، اما فریم ورک های آماده برای رسپانسیو قالب وب سایت این کار را بسیار ساده کرده اند، از این رو در این بخش شما را با انواع فریم ورک های Responsive آماده آشنا کرده ایم.