جلسه هفتم-آموزش کار با bootstrap

جلسه هفتم-آموزش کار با bootstrap

آموزش کار با bootstrap

 

Bootstrap یک کتابخانه است که مثله jQuery میتوانیم به صفحه خود اضافه کرده و از آن استفاده کنیم.

برای شروع کار، کتابخانه را به صفحه خود اضافه کنید.

ترتیب قرار گیری کتابخانه ها مهم است. اول کتابخانه bootstrap را اضافه میکنیم و پس از آن jQuery، به دلیل اینکه در bootstrap از jQuery استفاده شده است. سپس کتابخونه bootstrap در حالته script به صفحه خود اضافه میکنیم.

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

       <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>

       <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

تا به اینجای کار ما طراحی واکنش گرا را انجام دادیم. ولی حال با استفاده از کتابخانه bootstrap میتوانیم تنها با صدا زدن کلاس ها، تغییرات واکنش گرا را بر صفحه خودمان اعمال کنیم.

میتوانید نام کلاس ها را برای دستگاه ها با سایز های مختلف را از جدول زیر پیدا کنید.

برای مثال کلاس .col-sm- برای حالت tablet است و .col-md- برای Desktop استفاده می شود.

 

آموزش کار با bootstrap

 

محتوای کلی سایت خود را در container قرار داده و بخش های مربوط بهم که در نظر دارید در یک سطر قرار بگیرند را در row قرار دهید.

 

<div class="containet">
    <div class="row">

      <div class="col-sm-4">
        <h2>First</h2>
        Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
      </div>

      <div class="col-sm-4">
        <h2>second</h2>
        Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
      </div>

      <div class="col-sm-4">
        <h2>third</h2>
        Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
      </div>
    </div>
  </div>

 

Desktop:

 

آموزش کار با bootstrap

 

Tablet:

 

آموزش کار با bootstrap

 

phone:

 

آموزش کار با bootstrap

 

میتوانید به طریق مختلف، چینش را تغییر دهید.

برای مثال در حالت desktop چهار ردیف ایجاد شود. و برای تبلت ۲ ردیف و برای تلفن همراه به ترتیب زیر هم قرار گیرد.

 

<div class="col-md-3 col-sm-6">
        <h2>First</h2>
        Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
      </div>

 

آموزش کار با bootstrap

 

 

آموزش کار با bootstrap

 

آموزش کار با bootstrap

 

همچنین میتوانید به صورت اماده یک header با کلاس jumbotron برای سایت خود ایجاد کنید و همچنین متن خود را به صورت وسط چین با دستور text-center قرار دهید. تمامی این کلاس ها در کتابخانه bootstrap شما قرار دارد که میتوانید تنها با فراخوانی کلاس های آن، تغییرات را اعمال کنید.

 

<div class="jumbotron text-center">

              <h1>BOOTSTRAP</h1>

              <p>Quickly design and customize responsive mobile-first sites with Bootstrap</p>

       </div>

 

آموزش کار با bootstrap

 

 

آموزش کار با bootstrap

 

 

آموزش کار با bootstrap

 

قسمت قبل آموزش (تغییرات بیشتر در طراحی واکنش گرا)

قسمت بعد آموزش (کار با المان های مختلف در bootstrap)

 

 

farkiantech

مطالب مرتبط

دیدگاهها

نظر: