Bootstrap և Masonry

Ինտեգրել որմնադրությանը Bootstrap ցանցային համակարգի և քարտերի բաղադրիչի հետ:

Որմնադրությանը ներառված չէ Bootstrap-ում: Ավելացրեք այն՝ ներառելով JavaScript հավելվածը ձեռքով կամ օգտագործելով նման CDN՝


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

Փաթաթման վրա ավելացնելով data-masonry='{"percentPosition": true }', .rowմենք կարող ենք համատեղել Bootstrap-ի արձագանքող ցանցի և մասոնականի դիրքավորման ուժերը:


Placeholder Image cap
Քարտի վերնագիր, որը փաթաթվում է նոր տողով

Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

Placeholder Image cap
Քարտի անվանումը

Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

Քարտի անվանումը

Այս քարտը ունի սովորական վերնագիր և տեքստի կարճ պարբերություն դրա տակ:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Placeholder Card image

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

Քարտի անվանումը

Սա ևս մեկ բացիկ է՝ ստորև վերնագրով և օժանդակ տեքստով: Այս քարտն ունի որոշ լրացուցիչ բովանդակություն՝ այն ընդհանուր առմամբ մի փոքր ավելի բարձր դարձնելու համար:

Վերջին անգամ թարմացվել է 3 րոպե առաջ