码迷,mamicode.com
首页 > 其他好文 > 详细

BootStrap排版

时间:2019-02-11 12:16:10      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:padding   列表   图片   方便   spl   href   container   lin   info   

  • 排版(.page-header)

  1. Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
  2. 代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <!--没有压缩的,即是没有去除空格和换行,方便学习-->
            <link rel="stylesheet" href="bs/css/bootstrap.css" />
            <!--
                压缩版的,去除了空格和换行,文件小,省带宽
            <link rel="stylesheet" href="bs/css/bootstrap.min.css" />
            
            -->
            <!--要使用bootstrap的js插件,必须有jquery的支持-->
            <script type="text/javascript" src="js/jquery.min.js" ></script>
            <!--bootstrap的主包,同样bootstrap.min.js是压缩版-->
            <script type="text/javascript" src="bs/js/bootstrap.js" ></script>
            <style>
                
            </style>
        </head>
        <body>
            <div class="container">
                <h1 class="page-header">Bootstrap前端框架</h1>
            </div>
        </body>
    </html>

     

  3. 效果截图
    技术图片
    与正常h1标签相比,字的上边距加大,下面有根线
  • 段落(.lead)

  1. 代码

     

    <p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
    
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
    
    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

     

  2. 效果截图
    技术图片

    与传统p标签相比,字体加黑,加粗,也即是强调

  • mark标记

  1. 代码
    <mark>Nullam </mark>

     

  2. 效果截图
    技术图片

    也即是字体加了背景

  • del删除线

  1. 代码
    <del>Nullam </del>

     

  2. 效果截图
    技术图片

     

  • small小号字体

  1. 代码
    <small>Nullam quis risus eget urna mollis </small>

     

  2. 效果截图
    技术图片

    字体大小比周围小一号

  • 文本对齐

  1. 代码
    <p class="text-center">it sit amet non magna. </p>

     

  2. 效果截图
    技术图片

    text-center文本居中,常用的有text-right、text-left,text-justify两端对齐,text-nowrap

  • 文本大小写

  1. 代码
    <!--全部字母小写-->
    <p class="text-lowercase">it sit amet non magna. </p>
    <!--全部字母大写-->
    <p class="text-uppercase">it sit amet non magna. </p>
    <!--首字母大写-->
    <p class="text-capitalize">it sit amet non magna. </p>

     

  2. 截图
    技术图片

     

  • 无样式列表

  1. 代码
    <ul class="list-unstyled">
        <li>sfd</li>
        <li>sfd</li>
        <li>sfd</li>
        <li>sfd</li>
    </ul>
    移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。

     

  2. 效果截图
    技术图片

     

  • 内联样式

  1. 代码
    <ul class="list-inline">
      <li>...</li>
    </ul>
    也即是通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

     

  • 自定义列表

  1. 代码

    <dl>
      <dt>选择题</dt>
       <dd>A.Linux</dd>
       <dd>B.Windows</dd>
    </dl>

     

  2. 效果截图
    技术图片

    默认就改变了样式,标题加粗

  • 水平排列列表

  1. 代码
    <dl class="dl-horizontal">
      <dt>选择题</dt>
          <dd>A.Linux</dd>
          <dd>B.Windows</dd>
    </dl>
  2. 效果截图
    技术图片

     

BootStrap排版

标签:padding   列表   图片   方便   spl   href   container   lin   info   

原文地址:https://www.cnblogs.com/PCBullprogrammer/p/10361123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!