首页 / BOOTSTRAP / Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1948字，纯文字阅读大概需要3分钟。

内容图文

Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

1. Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕尺寸的增加，系统会自动分为最多12列。

技术分享图片

举例：

            <!
            DOCTYPE html
            >
            <
            html
            >
            <
            head
            >
            <
            meta 
            http-equiv
            ="Content-Type"
             content
            ="text/html; charset=utf-8"
            />
            <
            title
            >My Test bootstrap</title><link rel="stylesheet" href="./css/bootstrap.min.css"><script type="text/javascript" src="./js/bootstrap.min.js"></script></head><body><div class="container" style="background-color: #6AC239;"><div class="row"><div class="col-lg-4" style="border:1px solid black;">
          第一列
        </div><div class="col-lg-4" style="border:1px solid black;">
          第二列
        </div><div class="col-lg-4" style="border:1px solid black;">
          第三列        
        </div></div><div class="row"><div class="col-lg-3" style="border:1px solid black;">
          第一列
        </div><div class="col-lg-3" style="border:1px solid black;">
          第二列
        </div><div class="col-lg-3" style="border:1px solid black;">
          第三列        
        </div><div class="col-lg-3" style="border:1px solid black;">
          第四列        
        </div></div></div></body></html>

实现效果：

技术分享图片

 

 2.  一些进行 Bootstrap 排版类的样式

技术分享图片

 

3. <abbr> 元素，<blockquote>引用

            <!
            DOCTYPE html
            >
            <
            html
            >
            <
            head
            >
            <
            meta 
            http-equiv
            ="Content-Type"
             content
            ="text/html; charset=utf-8"
            />
            <
            title
            >My Test bootstrap</title><link rel="stylesheet" href="./css/bootstrap.min.css"><script type="text/javascript" src="./js/bootstrap.min.js"></script></head><body><abbr title="World Wide Web">WWW</abbr><br><blockquote class="pull-right">
  学海无涯。
  <small>来自于<cite title="Source Title">小胡子语录</cite></small></blockquote></body></html>

实现效果：

技术分享图片

 

、 元素' ref='nofollow'>Bootstrap -- 网格系统、排版样式类、

、 元素

原文：https://www.cnblogs.com/ChengWenHao/p/BootstrapPart2.html

内容总结

以上是互联网集市为您收集整理的Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素全部内容，希望文章能够帮你解决Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1283688.html

来源：【匿名】