در خدمت شما هستیم با آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template) از سری آموزش های تک قسمتی است
سلام برنامه در این آمزش نمونه قالب های مختلف را معرفی می کند
به صورت کلی وبسایت ها به موارد زیر تقسیم می شوند
- Blog: سایت هایی که ظاهر وبلاگ گونه دارند
- Portfolio : وبسایت هایی که برای نمایش نمونه کارها استفاده می شوند
- Webpage : صفحات وب سایت های ساده و معمولی
- Social : وبسایت های اجتماعی مثل فیسبوک
- Marketing : وبسایت های فروشگاهی
- و…
در این جلسه نمونه هایی از حالت رسپانسیو سایت های بالا را به شما معرفی می کنیم
هدف از این جلسه نشان دادن استاندارد قرار گیری المان ها در وبسایت های مختلف است
blog
ابتدا بگذارید تعریفی از بلاگ داشته باشیم وبلاگ صفحه ای است که شامل چندین بلاگ در خود میشود به بخش بندی های مختلفی که برای نمایش محتوا در صفحه ای استفاده میکنیم بلاگ میگوییم .
در بوت استرپ ساختار قالبی و نمونه ای بلاگ را داریم که میتوان به آن ساختار یک وب سایت ساده ام گفت که شامل:
- بخش سایدبار
- بخش محتوای اصلی
- بخش فوتر
است البته میتواند شامل بخش های دیگر هم باشد اما این حالت default آن است. ما برای شما کد های یک بلاگ ساده با یک مطلب را آورده ایم :
<!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.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> /* Set height of the grid so .sidenav can be 100% (adjust if needed) */ .row.content {height: 1500px} /* Set gray background color and 100% height */ .sidenav { background-color: #f1f1f1; height: 100%; } /* Set black background color, white text and some padding */ footer { background-color: #555; color: white; padding: 15px; } /* On small screens, set height to 'auto' for sidenav and grid */ @media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content {height: auto;} } </style> </head> <body> <div class="container-fluid"> <div class="row content"> <div class="col-sm-3 sidenav"> <h4>John's Blog</h4> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#section1">Home</a></li> <li><a href="#section2">Friends</a></li> <li><a href="#section3">Family</a></li> <li><a href="#section3">Photos</a></li> </ul><br> <div class="input-group"> <input type="text" class="form-control" placeholder="Search Blog.."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </div> <div class="col-sm-9"> <h4><small>RECENT POSTS</small></h4> <hr> <h2>I Love Food</h2> <h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5> <h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br> <p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <br><br> <h4><small>RECENT POSTS</small></h4> <hr> <h2>Officially Blogging</h2> <h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5> <h5><span class="label label-success">Lorem</span></h5><br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <h4>Leave a Comment:</h4> <form role="form"> <div class="form-group"> <textarea class="form-control" rows="3" required></textarea> </div> <button type="submit" class="btn btn-success">Submit</button> </form> <br><br> <p><span class="badge">2</span> Comments:</p><br> <div class="row"> <div class="col-sm-2 text-center"> <img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="col-sm-10"> <h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4> <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <br> </div> <div class="col-sm-2 text-center"> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="col-sm-10"> <h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4> <p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <br> <p><span class="badge">1</span> Comment:</p><br> <div class="row"> <div class="col-sm-2 text-center"> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="col-xs-10"> <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4> <p>Me too! WOW!</p> <br> </div> </div> </div> </div> </div> </div> </div> <footer class="container-fluid"> <p>Footer Text</p> </footer> </body> </html>
این کد های یک قالب تک مطلبی کامل است که با خروجی گرفتن از آن میتوانید قالب را ببینید.
Portfolio
portfolio یا همان قالب نمونه کار. معمولا این سبک از قالب مناسب کسانی است که شغل خاصی دارند و نمونه کار در کار آن ها بسیار مهم است مثلا طراحان سایت ،طراحان دکوراسیون داخلی ،نقاش ها و … قطعا برای مخاطبان این کسب و کار ها نمونه کار فرد بسیار مهم است و وقتی به سایت یا وبلاگ این افراد سر میزنند توقع دیدن نمونه ای از کار های فرد را دارند در حالت portfolio بوت استرپ چیزی که شما میبینید:
- بخش منو بار
- محتوای سایت یا همان بخش معرفی و توضیحات
- چند بلوک برای نمایش نمونه کار ها
- فوتر سایت
است . برای مشاهده ی نمونه ی ساده ای از یک سایت portfolio برای شما کد های آماده یک قالب ساده نمونه کار را آورده ایم:
<!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.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> /* Remove the navbar's default margin-bottom and rounded borders */ .navbar { margin-bottom: 0; border-radius: 0; } /* Add a gray background color and some padding to the footer */ footer { background-color: #f2f2f2; padding: 25px; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Portfolio</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container text-center"> <h1>My Portfolio</h1> <p>Some text that represents "Me"...</p> </div> </div> <div class="container-fluid bg-3 text-center"> <h3>Some of my Work</h3><br> <div class="row"> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> </div> </div><br> <div class="container-fluid bg-3 text-center"> <div class="row"> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> <div class="col-sm-3"> <p>Some text..</p> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> </div> </div> </div><br><br> <footer class="container-fluid text-center"> <p>Footer Text</p> </footer> </body> </html>
Webpage
صفحات و یا سایت های وب پیج برای سایت های معمولی و ساده استفاده میشوند تقریبا شامل بخش های بیشتری نسبت به حالت های تا الان گفته شده دارند و میتوانند شامل قسمت هایی نظیر:
- منو بالایی سایت یا همان منو بار
- سایدبار سمت راست
- ساید بار سمت چپ
- بخش محتوای الی که در وسط قرار دارد
- بخش انتهایی یا همان فوتر سایت
باشد این سایت ها میتوانند توسعه یافته و برای وب سایت هایی نظیر سایت های فیلم و سریال یا سایت های دانلودی استفاده شوند و یا حتی وبسایت های ساده آموزشی.
Social
از این نوع برای ساخت شبکه های اجتماعی استفاده میشود دوستان توجه داشته باشید که این چیدمان ها اجباری نیست و لزومی ندارد حتما شما از این چیدمان ها استفاده کنید این حالت ها پر استفاده ترین حالت ها در نوع خود هستند مواردی که برای یک شبکه اجتماعی لازم است تقریبا در این حالت فراهم شده است مواردی مثل:
- منو بار سایت
- ساید بار سمت راست
- ساید بار سمت چپ
- بخش لایک ها و سوشیال ها
- بخش گفت و گو های کاربران
- پخش پایانی یا فوتر سایت
این موارد قابل گسترش هستند و حالتی که ما برای شما کد آن را قرار میدهیم یک حالت ساده است:
<!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.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> /* Set black background color, white text and some padding */ footer { background-color: #555; color: white; padding: 15px; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Messages</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group input-group"> <input type="text" class="form-control" placeholder="Search.."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li> </ul> </div> </div> </nav> <div class="container text-center"> <div class="row"> <div class="col-sm-3 well"> <div class="well"> <p><a href="#">My Profile</a></p> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="well"> <p><a href="#">Interests</a></p> <p> <span class="label label-default">News</span> <span class="label label-primary">W3Schools</span> <span class="label label-success">Labels</span> <span class="label label-info">Football</span> <span class="label label-warning">Gaming</span> <span class="label label-danger">Friends</span> </p> </div> <div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <p><strong>Ey!</strong></p> People are looking at your profile. Find out who. </div> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> </div> <div class="col-sm-7"> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default text-left"> <div class="panel-body"> <p contenteditable="true">Status: Feeling Blue</p> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-thumbs-up"></span> Like </button> </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>John</p> <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Bo</p> <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Jane</p> <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Anja</p> <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> </div> <div class="col-sm-2 well"> <div class="thumbnail"> <p>Upcoming Events:</p> <img src="paris.jpg" alt="Paris" width="400" height="300"> <p><strong>Paris</strong></p> <p>Fri. 27 November 2015</p> <button class="btn btn-primary">Info</button> </div> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> <footer class="container-fluid text-center"> <p>Footer Text</p> </footer> </body> </html>
Marketing
فروشگاه های مارکتینگ یا همان فروشگاه های آنلاین که امروزه بازار آن ها بسیار داغ است. از این فروشگاه ها هم میتوان برای فروش محصولات فیزیکی استفاده کرد و هم محصولات مجازی قالب و چیدمان این سایت ها معمولا شامل واردی مثل:
- منو بار سایت
- اسلایدر محصولات
- بخش نمایش محصولات
- سایدبار
- بخش پایانی یا همان فوتر
البته چیدمان این المان ها کاملا اختیاری با تبعیت از ui و ux مناسب است و حالتی که ما کد های آن را برای شما قرار میدهیم ساده ترین حالت ممکن آن است:
<!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.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> /* Remove the navbar's default margin-bottom and rounded borders */ .navbar { margin-bottom: 0; border-radius: 0; } /* Add a gray background color and some padding to the footer */ footer { background-color: #f2f2f2; padding: 25px; } .carousel-inner img { width: 100%; /* Set width to 100% */ margin: auto; min-height:200px; } /* Hide the carousel text when the screen is less than 600 pixels wide */ @media (max-width: 600px) { .carousel-caption { display: none; } } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://placehold.it/1200x400?text=IMAGE" alt="Image"> <div class="carousel-caption"> <h3>Sell $</h3> <p>Money Money.</p> </div> </div> <div class="item"> <img src="https://placehold.it/1200x400?text=Another Image Maybe" alt="Image"> <div class="carousel-caption"> <h3>More Sell $</h3> <p>Lorem ipsum...</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="container text-center"> <h3>What We Do</h3><br> <div class="row"> <div class="col-sm-4"> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> <p>Current Project</p> </div> <div class="col-sm-4"> <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"> <p>Project 2</p> </div> <div class="col-sm-4"> <div class="well"> <p>Some text..</p> </div> <div class="well"> <p>Some text..</p> </div> </div> </div> </div><br> <footer class="container-fluid text-center"> <p>Footer Text</p> </footer> </body> </html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه سی و چهارم (Affix)
آموزش Bootstrap جلسه پایانی (Design Template)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا در صورت علاقه آن را در آپارات ببینید: