hbootstrap4rtl

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap 4 - Example 4</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="./../../bootstrap-rtl.css"> <link rel="stylesheet" href="./../style/css/vazir.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">مجله آموزشی راکت</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">صفحه اصلی</a> </li> <li class="nav-item"> <a class="nav-link" href="#">مقالات</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">دوره های آموزشی</a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control ml-sm-2" type="text" placeholder="جستجو..." aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">جستجو</button> </form> </div> </nav> </header> <main role="main"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <div class="container"> <div class="carousel-caption text-right"> <h1>عنوان اسلایدر</h1> <p class="mt-3">باور ما اینست که کاربران ایرانی لایق بهترین ها هستند و باید بهترین و بروزترن فیلم های آموزشی و مقالات در اختیار آنها قرار بگیرد تا بتوانند به سرعت پیشرفت کنند و جزء بهترین ها در صنعت طراحی و برنامه نویسی وب شوند . با ما همراه باشید تا بهترین ها رو لایق بهترین کاربران کنیم</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">عضویت در راکت</a></p> </div> </div> </div> <div class="carousel-item"> <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <div class="container"> <div class="carousel-caption"> <h1>عنوان اسلایدر دوم</h1> <p>باور ما اینست که کاربران ایرانی لایق بهترین ها هستند و باید بهترین و بروزترن فیلم های آموزشی و مقالات در اختیار آنها قرار بگیرد تا بتوانند به سرعت پیشرفت کنند و جزء بهترین ها در صنعت طراحی و برنامه نویسی وب شوند . با ما همراه باشید تا بهترین ها رو لایق بهترین کاربران کنیم</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">ادامه مطلب</a></p> </div> </div> </div> <div class="carousel-item"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <div class="container"> <div class="carousel-caption text-right"> <h1>بروزترین دوره های آموزشی</h1> <p>باور ما اینست که کاربران ایرانی لایق بهترین ها هستند و باید بهترین و بروزترن فیلم های آموزشی و مقالات در اختیار آنها قرار بگیرد تا بتوانند به سرعت پیشرفت کنند و جزء بهترین ها در صنعت طراحی و برنامه نویسی وب شوند . با ما همراه باشید تا بهترین ها رو لایق بهترین کاربران کنیم</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">جستجو در بین دورها</a></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>   <div class="container marketing">  <div class="row"> <div class="col-lg-4"> <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2 class="mt-2">عنوان</h2> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <p><a class="btn btn-secondary" href="#" role="button">مشاهده جزئیات »</a></p> </div> <div class="col-lg-4"> <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2 class="mt-2">عنوان</h2> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <p><a class="btn btn-secondary" href="#" role="button">مشاهده جزئیات »</a></p> </div> <div class="col-lg-4"> <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2 class="mt-2">عنوان</h2> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <p><a class="btn btn-secondary" href="#" role="button">مشاهده جزئیات »</a></p> </div> </div>  <hr class="featurette-divider"> <div class="row featurette"> <div class="col-md-7 d-flex flex-column justify-content-center"> <h2 class="h1">عواقب یک وبسایت وردپرسی هک شده</h2> <p class="lead">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> </div> <div class="col-md-5"> <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> <hr class="featurette-divider"> <div class="row featurette"> <div class="col-md-7 order-md-2 d-flex flex-column justify-content-center"> <h2 class="h1">دوره های آموزشی <span class="text-muted">کاربردی و دقیق</span></h2> <p class="lead">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> </div> <div class="col-md-5 order-md-1"> <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> <hr class="featurette-divider"> <div class="row featurette"> <div class="col-md-7 d-flex flex-column justify-content-center"> <h2 class="h1">۴ نکته مهم برای تبدیل شدن <span class="text-muted">به یک توسعه‌دهنده</span></h2> <p class="lead">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> </div> <div class="col-md-5"> <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> <hr class="featurette-divider">  </div>  <footer class="container"> <p class="float-left"><a href="#">بازگشت به بالای صفحه</a></p> <p>© 1396-1397 مجله آموزشی راکت. · <a href="#">حریم خصوصی</a> · <a href="#">قوانین</a></p> </footer> </main> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="./../style/js/holder.min.js"></script> <script src="js/script.js"></script> </body> </html>