zoukankan      html  css  js  c++  java
  • Bootstrap页面布局9

    列表:

      无序列表(列表中项目内容没有固定的顺序),

      有序列表(通常使用在一组有前后顺序的内容上),

      描述列表(定义解释一组词汇)

    无序列表:

      <ul>

        <li>Ueditor编辑器</li>

        <li>TinyMCE编辑器</li>

        <li>Kindeditor编辑器</li>

      </ul>

    如图:

      

     有序列表: 

      <ol>

        <li>Ueditor编辑器</li>

        <li>TinyMCE编辑器</li>

        <li>Kindeditor编辑器</li>

      </ol>

    如图:

        

     描述列表:

      dt:要描述的词汇

      dd:对这个词汇进行解释的句子

      <dl>

        <dt>Ueditor编辑器</dt>

        <dd>Ueditor编辑器强大细致</dd>

        <dt>TinyMCE编辑器</dt>

        <dd>TinyMCE编辑器好像还不错</dd>

        <dt>Kindeditor编辑器</dt>

        <dd>Kindeditor编辑器非常好用</dd>

      </dl>

    如图:

      

    BS为描述列表提供了类来更改描述列表的样式:

      

    这里的样式应该是水平对齐,为什么这里没有水平对齐,找到bootstrap.css!!!

    源文件中的

    .dl-horizontal dt {
      float: left;
      clear: left;
       120px;
      text-align: right;
    }
    .dl-horizontal dd {
      margin-left: 130px;//这里的130px表示dd距离dt相差10个像素
    }

    不用修改源码,只需要在新的css文件或者页面style标签中重新定义.dl-horizontal dd的样式为:

    .dl-horizontal dd {
      margin-left: 10px;

      float:left;

    }

    修改完成后,得到如图所示效果:

      

    这个效果就正常了!(但我还是不确定,是不是这么修改...)

    本人这里如果有问题,请留言,谢谢先。

    ---- 始终相信这句:
    ----“做每天该做的事,不计结果!”
    ---- 因爲對於編程還只是新手,對很多知識掌握的不牢靠,歡迎大家批評指正~~|=-=|~~
  • 相关阅读:
    day10_发送邮件终极版
    day10_发送带附件的邮件
    day10_发送普通邮件
    day10_多线程性能测试
    day10_虚拟环境和搭建测试环境的步骤
    codeforces 877B
    codeforces 982C Cut 'em all! (dfs)
    洛谷P1171 售货员的难题 dp
    点集配对问题
    codeforces 891A Pride (数学)
  • 原文地址:https://www.cnblogs.com/Zell-Dinch/p/3880595.html
Copyright © 2011-2022 走看看