bootsrap栅格布局和图标引入

朱雀 2022-03-10 07:57 236阅读 0赞

栅格布局是什么？自带响应式？字体图标如何引入？统统在此告诉你！

  • 栅格布局（响应式）

按行布局，每行最多12分配空间

20190310112708359.png 

  1. <div class="container">
  2.         <div class="row">
  3.             <div class="block col-lg-12 col-md-12 col-sm-12 col-xs-12">1 2 3 4 5 6 7 8 9 10 11 12</div>
  4.         </div>
  5. </div>

按父级元素宽分配空间

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70

  1. <div class="container">
  2.         <div class="row">
  3.             <div class="block col-lg-2 col-md-2 col-sm-2 col-xs-2">01</div>
  4.             <div class="block col-lg-10 col-md-10 col-sm-10 col-xs-10">2345678912</div>
  5.         </div>
  6.         <div class="row">
  7.             <div class="block col-lg-7 col-md-7 col-sm-7 col-xs-7">
  8.                 <div class="block col-lg-5 col-md-5 col-sm-5 col-xs-5">12345</div>
  9.                 <div class="block col-lg-7 col-md-7 col-sm-7 col-xs-7">6789101112</div>
  10.             </div>
  11.         </div>
  12.     </div>
  • 引入图标

一般用 i 标签引入图标，glyphicon引入类，后者引入具体图标

20190310113702492.png

  1. <i class="glyphicon glyphicon-play-circle" style="font-size: 50px;"></i>

发表评论

表情：
评论列表 （有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读