هما بلغ تعقيد الفكرة؛ فإنّي أرى أنّ تبسيطها حتمي. الفكرة قبل أن تتحوّل إلى منتج، أو حتّى قبل أن تنفّذ؛ ينبغي أن يحدّد عنصرها أو عَناصرها الأهم.

لا أخفيك أنّي أحب تصفّح الويب من جهاز الحاسوب؛ لكن هذا لا يجعله مفضّلاً و مقدّمًا دائمًا.

options

Multiline

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements than would fit in a single row.

is-one-quarter

is-half

is-one-quarter

Auto

                    

                        
                        <div class="columns is-multiline is-mobile">
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-half">
                            <code>is-half</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column">
                            Auto
                          </div>
                        </div>

Centering columns

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:

is-half

                    

                        
                        <div class="columns is-mobile is-centered">
                          <div class="column is-half">
                            <p class="bd-notification is-primary">
                              <code class="html">is-half</code><br>
                            </p>
                          </div>
                        </div>

Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

                    

                        
                        <div class="columns is-mobile is-multiline is-centered">
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              First Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              Our Second Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              Third Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              The Fourth Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              Fifth Column
                            </p>
                          </div>
                        </div>

إبداعى 01

شركات 01

مطعم برجر

حفل زفاف

شركات 02

صالون حلاقة

شركة شحن

مطعم 01

منظم حفلات

شركة شحن 02

إبداعى 02

فساتين الزفاف

إبداعى 03

تحت الإنشاء

أخر الاخبار

media