شروع کار با Bulma

برای استفاده از Bulma فقط به 1 فایل CSS نیاز دارید.

روش های مختلفی برای شروع با Bulma وجود دارد. شما می توانید:

  1. برای نصب پکیج Bulma از npm استفاده کنید.
  2. از jsDelivr CDN برای لینک به صفحه استایل Bulma استفاده کنید
  3. از مخزن GitHub برای دریافت آخرین ورژن توسعه داده شده استفاده کنید

1

استفاده از NPM (پیشنهاد شده):

npm install bulma

آیکون های Font Awesome

اگر می خواهید همراه Bulma از آیکون هم استفاده کنید Font Awesome 5 را اضافه کنید:

                                    
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
                                       
                                 

الزامات کد #

برای اینکه Bulma به درستی کار کند ، باید صفحه وب خود را ریسپانسو بسازید.

1

از HTML5 doctype استفاده کنید

<!DOCTYPE html>

2

اضافه کردن متا تگ viewport ریسپانسیو

                                    
<meta name="viewport" content="width=device-width, initial-scale=1">

الگوی شروع کننده #

اگر می خواهید بلافاصله شروع به کار کنید ، می توانید از این الگوی شروع کننده HTML استفاده کنید. فقط کافی است این کد را در یک فایل کپی / جایگذاری کنید و در کامپیوتر خود ذخیره کنید.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
 </head>
 <body>
  <section class="section">
   <div class="container">
    <h1 class="title">
       Hello World
    </h1>
    <p class="subtitle">
            My first website with <strong>Bulma</strong>!
    </p>
   </div>
  </section>
 </body>
</html>
                                

bulma-start #

bulma-start است یک بسته nmp کوچک است که شامل وابستگی های npm که برای ساخت وب سایت خود با Bulma نیاز دارید.

بررسی کنید