لیست های نامرتب
به‌طور پیش‌فرض، استفاده از فهرست نامرتب ul فهرست html ایجاد نمی‌کند. این بخشی از مشخصات Bulma است. برای ایجاد لیست نامرتب، آن را در داخل یک div با کلاس محتوا قرار دهید. لیست ها همچنین می توانند اصلاح کننده is-light برای تغییر رنگ متن داشته باشند.
- قهوه
- چای
- شیر
- قهوه
- چای
- شیر
<div class="content">
<ul>
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ul>
<ul class="is-light">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ul>
</div>
لیست های مرتب
فهرست‌های مرتب شده ol نیز با استفاده از div با کلاس محتوا ایجاد می‌شوند. گلوله های لیست مرتب شده را می توان با ویژگی type کنترل کرد. انواع موجود عبارتند از: type="1"، type="A"، type="a"، type="I" ، type="i".
- قهوه
- چای
- شیر
- قهوه
- چای
- شیر
- قهوه
- چای
- شیر
- قهوه
- چای
- شیر
- قهوه
- چای
- شیر
<div class="content">
<ol type="1">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>
<ol type="A">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>
<ol type="a">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>
<ol type="I">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>
<ol type="i">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>
</div>
عنوان
برای ایجاد عنوان، می توانید کلاس title را به هر عنصر html اضافه کنید. اندازه عنوان را می توان با اصلاح کننده های شماره گذاری شده با استفاده از الگوی is-* که در آن *< کنترل کرد. /code> عددی بین 3 و 6 را نشان می‌دهد. عناوین همچنین می‌توانند با استفاده از is-thin نازک‌تر، با استفاده از "is-bold " پررنگ‌تر یا با استفاده از " پررنگ‌تر باشند. is-bolder "کلاس های اصلاح کننده.
این یک عنوان است
این یک عنوان بزرگ است/p>
این یک عنوان است
این یک عنوان بزرگ است
این یک عنوان است
این یک عنوان است
medium titleاین یک عنوان است
این یک عنوان است
smaller titleاین یک عنوان است
این یک عنوان است
huge bold titleاین یک عنوان است
این یک عنوان است
big bold titleاین یک عنوان است
این یک عنوان است
medium bold titleاین یک عنوان است
این یک عنوان است
smaller bold titleاین یک عنوان است
این یک عنوان است
huge bolder titleاین یک عنوان است
این یک عنوان است
big bolder titleاین یک عنوان است
این یک عنوان است
medium bolder titleاین یک عنوان است
این یک عنوان است
smaller bolder titleاین یک عنوان است
این یک عنوان است
huge thin titleاین یک عنوان است
این یک عنوان است
big thin titleاین یک عنوان است
این یک عنوان است
medium thin titleاین یک عنوان است
این یک عنوان است
smaller thin title
<div class="columns is-multiline">
<div class="column is-3">
<h1 class="title is-3 is-narrow">این یک عنوان است</h1>
<p>This is a huge title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow">این یک عنوان است</h2>
<p>This is a big title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow">این یک عنوان است</h2>
<p>This is a medium title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow">این یک عنوان است</h2>
<p>This is a smaller title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow is-bold">این یک عنوان است</h1>
<p>This is a huge bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow is-bold">این یک عنوان است</h2>
<p>This is a big bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow is-bold">این یک عنوان است</h2>
<p>This is a medium bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow is-bold">این یک عنوان است</h2>
<p>This is a smaller bold title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow is-bolder">این یک عنوان است</h1>
<p>This is a huge bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow is-bolder">این یک عنوان است</h2>
<p>This is a big bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow is-bolder">این یک عنوان است</h2>
<p>This is a medium bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow is-bolder">این یک عنوان است</h2>
<p>This is a smaller bolder title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow is-thin">این یک عنوان است</h1>
<p>This is a huge thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow is-thin">این یک عنوان است</h2>
<p>This is a big thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow is-thin">این یک عنوان است</h2>
<p>This is a medium thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow is-thin">این یک عنوان است</h2>
<p>This is a smaller thin title</p>
</div>
</div>
زیر عنوان
برای ایجاد یک زیرنویس، می توانید کلاس subtitle را به هر عنصر html اضافه کنید. اندازه زیرنویس را می توان با اصلاح کننده های شماره گذاری شده با استفاده از الگوی is-* کنترل کرد که در آن * عددی بین 4 و 6 را نشان می دهد.
این یک عنوان است
این یک زیرعنوان است
این یک عنوان است
این یک زیرعنوان است
این یک عنوان است
این یک زیرعنوان است
این یک عنوان است
این یک زیرعنوان است
<div class="columns">
<div class="column is-3">
<h1 class="title is-3">این یک عنوان است</h1>
<p class="subtitle is-4">This is a huge subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-4">این یک عنوان است</h2>
<p class="subtitle is-4">This is a big subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-5">این یک عنوان است</h2>
<p class="subtitle is-5">This is a medium subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-6">این یک عنوان است</h2>
<p class="subtitle is-6">This is a smaller subtitle</p>
</div>
</div>
Blockquote
Huro یک ظاهر طراحی عنصر html blockquote را ارائه می دهد. عنصر blockquote خود را در داخل یک div با کلاس محتوا قرار دهید. بلوک ها می توانند رنگ های مختلفی داشته باشند. کلاس های اصلاح کننده رنگ موجود عبارتند از: is-primary، is-success، is-info، is-warning، is-danger.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
<div class="content">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.</p>
</blockquote>
<blockquote class="is-primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.</p>
</blockquote>
<blockquote class="is-success">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.</p>
</blockquote>
</div>
تقسیم کننده
Huro تقسیم کننده هایی برای محتوای متنی شما فراهم می کند. شما می توانید با ارسال متن تقسیم کننده به عنوان ویژگی html data-content از تقسیم کننده های افقی و عمودی استفاده کنید. برای جزئیات بیشتر در مورد استفاده، به مثال کد مراجعه کنید.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
<div class="content">
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit
est tellus sit amet turpis.</p>
<div class="is-divider" data-content="OR"></div>
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit
est tellus sit amet turpis.</p>
</div>
<div class="columns">
<div class="column">
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut
blandit est tellus sit amet turpis.</p>
</div>
<div class="is-divider-vertical" data-content="OR"></div>
<div class="column">
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut
blandit est tellus sit amet turpis.</p>
</div>
</div>
جدول محتوا
همچنین می توانید از کلاس محتوا برای بسته بندی عنصر جدول html استفاده کنید تا حداقل سبک ها را در رابط کاربری جدول خود اعمال کنید. لطفاً برای یافتن نمونه‌های جدول و طرح‌بندی پیشرفته‌تر به بخش اجزای Huro مراجعه کنید.
| قهرمان ها | قدرت | دسترسی |
|---|---|---|
| سوپرمن | در درسترس | |
| بتمن | در درسترس نیست | |
| مرد عنکبوتی | دردسترس نیست | |
| مرد آهنی | دردسترس | |
| دکتر استرانگ | دردسترس نیست |
<div class="content">
<table>
<thead>
<tr>
<th>Heroes</th>
<th>Power</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Batman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Deadpool</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Spawn</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Galactus</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
</tbody>
</table>
</div>