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 1</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> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4 class="text-white">درباره ما</h4> <p class="text-muted">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4 class="text-white">ارتباط با ما</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">توئیتر</a></li> <li><a href="#" class="text-white">فیسبوک</a></li> <li><a href="#" class="text-white">ایمیل من</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark box-shadow"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" ViewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg> <strong class="mr-1">مجله آموزشی راکت</strong> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div> </header> <main role="main"> <section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">مجله آموزشی راکت</h1> <p class="lead text-muted">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <p> <a href="#" class="btn btn-primary my-2">مقالات</a> <a href="#" class="btn btn-secondary my-2">دوره ها</a> </p> </div> </section> <div class="album py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card mb-4 box-shadow"> <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">نمایش</button> <button type="button" class="btn btn-sm btn-outline-secondary">ویرایش</button> </div> <small class="text-muted">9 دقیقه</small> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="text-muted"> <div class="container"> <p class="float-left"> <a href="#">برگشت به بالای صفحه</a> </p> <p>کليه حقوق محصولات و محتوای اين سایت متعلق به راکت می باشد</p> </div> </footer> <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="js/script.js"></script> </body> </html>