bootstrap - w3schools html reference pdf




7 أعمدة متساوية في bootstrap (10)

أنا حلها بطريقة بسيطة. أنا فقط استخدمت مجموعة زر مبررة من bootstrap ، فقط 7 أزرار مبررة ولكن بدلا من الزر الفعلي استخدمت امتداد في div حاوية الأزرار وتحييد الطبقات غير الضرورية. يبدو مثل هذا (كان للتقويم الأسبوعي أيضا)

<div class="col-xs-12">
  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">אי</span>
        <span class="day">26/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">בי</span>
        <span class="day">27/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">גי</span>
        <span class="day">28/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">די</span>
        <span class="day">29/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">הי</span>
        <span class="day">30/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding">
        <span class="day">שי</span>
        <span class="day">31/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
  </div>
</div>

كنت أتساءل إذا كان أي شخص يمكن أن يفسر كيف يمكنني الحصول على 7 أعمدة متساوية في التمهيد؟ أحاول عمل تقويم. يبدو أن هذا الرمز يؤدي إلى 5:

div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

يحتوي المحتوى الرئيسي الخاص بي على الفصل الدراسي التالي ، لذلك أرغب أن تجلس الأعمدة السبعة ضمن هذا:

العقيد-LG-12

هل يمكن لأي شخص أن يفسر ما إذا كان هذا ممكنًا ، أو إذا كان عليّ الالتزام بالأرقام حتى بدلاً من ذلك؟


إذا لم تضطر إلى استخدام 100٪ من العرض ، فيمكنك تقسيم العمود إلى 9 أجزاء متساوية واستخدام فقط من الداخل:

<div class="row" style="border: solid 1px black; height: 200px;">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4 col-md-offset-4" id="Col1" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col2" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4" id="Col3" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col4" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col5" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4" id="Col6" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col7" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
</div>

تحتاج إلى تقسيم تخطيط تمهيد 12 عمود إلى 7 أجزاء متساوية. إذا ذهبت حول تغيير تخطيط css ، فسوف تواجه نفس المشاكل مع قول كسر شاشة إلى 13 أجزاء متساوية مع تخطيط 14 عامًا.

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

<div class='container-fuid'>
 <table class='table'> <!-- add style="table-layout:fixed;" so that table do not vary in width due to text size variations -->
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
 </table>
</div>

له نفس التأثير مثل cols ، ولكنه أسرع على أساس كل حالة على حدة حيث تحتاج إلى عدد طولي من الكتل المتساوية التي سيتم طباعتها على الشاشة من خلال برنامج PHP أو خلاف ذلك.

كما هو الحال في عرض تدفق العملية ، يمكن للبرنامج النصي التالي أن يعطي فكرة عن الكيفية التي يمكن بها تحطيم شاشة قياسية ذات 12 عمودًا إلى أكبر عدد ممكن من الأعمدة / وحدات العرض كما تريد:

$cols = 15;     /* arbitary number of columns */

/* generate data array */

$data_array = array();

for($i=0 ; $i<$cols ; $i++){
        $data_array[] = 'Value : '.$i ;
}

/* use the array to get the screen in that many columns */

echo "<div class='container'>";
echo "<table class='table'>";
echo "<tr>";
foreach($data_array as $key => $value){
        echo "<td>".$value."</td>";
}
echo "</tr>";
echo "</table>";
echo "</div>";

حسنًا ، ربما تحتاج IMO إلى تجاوز width الأعمدة باستخدام استعلام @media .

إليك محاولتي لإنشاء نظام شبكة 7-col:

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

تأتي قيمة width من:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

عرض العمل

خيارات أخرى

يمكنك أيضًا إنشاء إصدار 7 أعمدة خاص بك من Bootstrap Twitter باستخدام Custom Builder (تغيير @grid-columns ، ...).

إذا كنت تستخدم مترجمًا أقل ، يمكنك تنزيل الإصدار الأقل من Twitter Bootstrap (من Github ) وتحرير الملف variables.less بدلاً من ذلك.


فقط إذا كنت تريد عمودًا 2/7 أو 3/7 وكنت تستخدم LESS CSS لتطويرك. المرجع: https://gist.github.com/kanakiyajay/15e4fc98248956614643

HTML

<div class="seven-cols">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-3"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

أقل

/* CSS for 7 column responsive
-------------------------------------------------- */
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1,
  .seven-cols .col-md-2,
  .seven-cols .col-sm-2,
  .seven-cols .col-lg-2,
  .seven-cols .col-md-3,
  .seven-cols .col-sm-3,
  .seven-cols .col-lg-3 {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 100%*(1/7);
    *width: 100%*(1/7);
  }
  .seven-cols .col-md-2,
  .seven-cols .col-sm-2,
  .seven-cols .col-lg-2 {
    width: 100%*(2/7);
    *width: 100%*(2/7);
  }
  .seven-cols .col-md-3,
  .seven-cols .col-sm-3,
  .seven-cols .col-lg-3 {
    width: 100%*(3/7);
    *width: 100%*(3/7);
  }
}

كنت أرغب في حل أكثر دقة لهذا ، لذا قمت بعمل مجموعة صف / كول كول خاصة (مرتبطة معنويا بمفهوم التقويم).

هذا مزقت الطريق يبني Bootstrap الشبكة الأساسية (في grid-framework.less ). وهي تحتفظ xs و sm و md و lg لتخصيص الشبكة في واجهات عرض مختلفة.

ملاحظة: هذا يشمل فقط تصميم الشبكة ؛ لا يزال عليك كتابة الباقي لجعله يبدو في الواقع مثل التقويم.

العلامة

<div class="row">
    <div class="col-xs-7">
        <div class="calendar">
            <div class="calendar-row">
                <div class="calendar-xs-1">Sunday</div>
                <div class="calendar-xs-1">Monday</div>
                <div class="calendar-xs-1">Tuesday</div>
                <div class="calendar-xs-1">Wednesday</div>
                <div class="calendar-xs-1">Thursday</div>
                <div class="calendar-xs-1">Friday</div>
                <div class="calendar-xs-1">Saturday</div>
            </div>
        </div>
    </div>
    <div class="col-xs-5">
        This container intentionally left blank.
    </div>
</div>

ال

/*
 * Calendar grid
 */

@calendar-columns:      7;
@calendar-gutter-width: 0px;

.make-calendar-columns() {
  // Common styles for all sizes of calendar columns, widths 1-12
  .cal(@index) when (@index = 1) { // initial
    @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}";
    .cal((@index + 1), @item);
  }
  .cal(@index, @list) when (@index =< @calendar-columns) { // general; "=<" isn't a typo
    @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}";
    .cal((@index + 1), ~"@{list}, @{item}");
  }
  .cal(@index, @list) when (@index > @calendar-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@calendar-gutter-width / 2);
      padding-right: (@calendar-gutter-width / 2);
    }
  }
  .cal(1); // kickstart it
}
.float-calendar-columns(@class) {
  .cal(@index) when (@index = 1) { // initial
    @item: ~"[email protected]{class}[email protected]{index}";
    .cal((@index + 1), @item);
  }
  .cal(@index, @list) when (@index =< @calendar-columns) { // general
    @item: ~"[email protected]{class}[email protected]{index}";
    .cal((@index + 1), ~"@{list}, @{item}");
  }
  .cal(@index, @list) when (@index > @calendar-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .cal(1); // kickstart it
}

.calc-calendar-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  [email protected]{class}[email protected]{index} {
    width: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  [email protected]{class}[email protected]{index} {
    left: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  [email protected]{class}-push-0 {
    left: auto;
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  [email protected]{class}[email protected]{index} {
    right: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  [email protected]{class}-pull-0 {
    right: auto;
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = offset) {
  [email protected]{class}[email protected]{index} {
    margin-left: percentage((@index / @calendar-columns));
  }
}

// Basic looping in LESS
.loop-calendar-columns(@index, @class, @type) when (@index >= 0) {
  .calc-calendar-column(@index, @class, @type);
  // next iteration
  .loop-calendar-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-calendar(@class) {
  .float-calendar-columns(@class);
  .loop-calendar-columns(@grid-columns, @class, width);
  .loop-calendar-columns(@grid-columns, @class, pull);
  .loop-calendar-columns(@grid-columns, @class, push);
  .loop-calendar-columns(@grid-columns, @class, offset);
}


// Row
//
// Rows contain and clear the floats of your columns.

.calendar-row {
    .make-row(@calendar-gutter-width);
}


// Columns
//
// Common styles for small and large grid columns

.make-calendar-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-calendar(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
  .make-calendar(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
  .make-calendar(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-calendar(lg);
}

مع نظام شبكة Bootstrap 3 يمكنك التفاف الأعمدة السبعة في div واستخدام فئة "col-md-offset". فمثلا:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-3">
      <div class="col-md-1 text-center">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>  
</div>

الجانب السلبي هو أنك مقيد بحجم عمود 10. إذا كنت تريد أن تشغل الأعمدة السبعة كامل الشاشة ، فيمكنك استخدام هذا:

  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center" style="margin-left: 3%;">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>

رمز القلم هنا: https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

أتمنى أن يساعدك هذا!


من المحتمل أن تكون الترقية إلى Bootstrap 4 خيارًا جيدًا.

يأتي مع عمود فئة لأعمدة عرض متساوية

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

https://v4-alpha.getbootstrap.com/layout/grid/#equal-width


<div class="col-sm-12">
                <div class="row">
                    <div class="col-xs-5">
                        <div class="row">
                            <div class="col-sm-4">01</div>
                            <div class="col-sm-4">02</div>
                            <div class="col-sm-4">03</div>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="row">
                            <div class="col-sm-12">04</div>
                        </div>
                    </div>
                    <div class="col-xs-5">
                        <div class="row">
                            <div class="col-sm-4">05</div>
                            <div class="col-sm-4">06</div>
                            <div class="col-sm-4">07</div>
                        </div>
                    </div>                  
                </div>
            </div>
</div>

<div class="row">
  <div class="col-lg-1">Mon</div>
  <div class="col-lg-2">Tue</div>
  <div class="col-lg-2">Wen</div>
  <div class="col-lg-2">Thu</div>
  <div class="col-lg-2">Fri</div>
  <div class="col-lg-2">Sat</div>
  <div class="col-lg-1">Sun</div>
</div>

سوف يحل هذا مشكلتك؟ سيتم تقليل مساحة العمود الأولية والأخيرة ، ولكن لا يبدو أنها تحقق الكثير من الاختلاف.







twitter-bootstrap-3