آموزش طراحی سایت-طراحی قالب ریسپانسیو در بوت استرپ

در این مقاله از مجموعه مقالات آموزش طراحی سایت در آموزشگاه تحلیل داده می آموزیم که چطور با استفاده از بوت استرپ 4، یک قالب ریسپانسیو ساخته و نمایش دهیم.

آموزش طراحی قالب ریسپانسیو در بوت استرپ 4 در طراحی وب سایت

در این مقاله، با استفاده از بوت استرپ 4، یک قالب ریسپانسیو یا Responsive Template می سازیم. این قالب دارای بخش های مختلف مثل هدر و منوی پیمایش Navigation Bar با چند لینک، عنوان های مختلف، ستون کناری، بدنه Body، چند لینک داخلی و فوتر است.

برای طراحی این قالب از کلاس های جدید بوت استرپ 4 استفاده و تمامی موارد جهت ریسپانسیو بودن آن (نمایش مناسب در تمامی سایز های صفحه نمایش) به کار رفته است. می توایند این قالب را ویرایش کرده و بخش هایی از آن را کم یا زیاد کنید.

مثال : ساخت قالب ریسپانسیو در بوت استرپ 4 در طراحی وبسایت حرفه ای

 <title>Bootstrap 4 Website Example</title>
  <meta charset=&quotutf-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
  <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot>
  <script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot>
  <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot>

  <script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot>

  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
<div class=&quotjumbotron text-center&quot style=&quotmargin-bottom:0&quot>
  <h1>My First Bootstrap 4 Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark&quot>
  <a class=&quotnavbar-brand&quot href=&quot#&quot>Navbar</a>
  <button class=&quotnavbar-toggler&quot type=&quotbutton&quot data-toggle=&quotcollapse&quot data-target=&quot#collapsibleNavbar&quot>
    <span class=&quotnavbar-toggler-icon&quot></span>
  </button>
  <div class=&quotcollapse navbar-collapse&quot id=&quotcollapsibleNavbar&quot>
    <ul class=&quotnavbar-nav&quot>
      <li class=&quotnav-item&quot>
        <a class=&quotnav-link&quot href=&quot#&quot>Link</a>
      </li>
      <li class=&quotnav-item&quot>
        <a class=&quotnav-link&quot href=&quot#&quot>Link</a>
      </li>
      <li class=&quotnav-item&quot>
        <a class=&quotnav-link&quot href=&quot#&quot>Link</a>
      </li>
    </ul>
  </div>
</nav>
<div class=&quotcontainer&quot style=&quotmargin-top:30px&quot>
  <div class=&quotrow&quot>
    <div class=&quotcol-sm-4&quot>
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class=&quotfakeimg&quot>Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class=&quotnav nav-pills flex-column&quot>
        <li class=&quotnav-item&quot>
          <a class=&quotnav-link active&quot href=&quot#&quot>Active</a>
        </li>
        <li class=&quotnav-item&quot>
          <a class=&quotnav-link&quot href=&quot#&quot>Link</a>
        </li>
        <li class=&quotnav-item&quot>
          <a class=&quotnav-link&quot href=&quot#&quot>Link</a>
        </li>
        <li class=&quotnav-item&quot>
          <a class=&quotnav-link disabled&quot href=&quot#&quot>Disabled</a>
        </li>
      </ul>
      <hr class=&quotd-sm-none&quot>
    </div>
    <div class=&quotcol-sm-8&quot>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class=&quotfakeimg&quot>Fake Image</div>
      <p>Some text..</p>
<p>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.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class=&quotfakeimg&quot>Fake Image</div>
      <p>Some text..</p>
<p>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.</p>
    </div>
  </div>
<div class=&quotjumbotron text-center&quot style=&quotmargin-bottom:0&quot>
  <p>Footer</p>
</div>

خروجی قالب به صورت زیر خواهد بود :

با دیگر مقالات ما در زمینه آموزش پروژه محور طراحی سایت همراه باشید..