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>

实现效果：

Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素的更多相关文章

  1. Bootstrap 一. 排版样式（内联文本元素，对齐，大小写，缩略语，地址文本，引用文本，列表排版 ，代码 ）

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  2. bootstrap之排版样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Bootstrap(2) 排版样式

    1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 1 ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  5. Bootstrap - 全局css样式类

    状态类 通过这些状态类可以为行或单元格设置颜色. .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning ...

  6. BootStrap中常用样式类

    网格选项 row:行 col--:列(第一个可以为xs[超小]/sm[小型]/md[中型]/lg[大型]:第二个必须为12以内的[列数]) col--offset-:列偏移(第一个同上,第二个范围为1 ...

  7. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  8. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  9. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

随机推荐

  1. 【Spark篇】---Spark中yarn模式两种提交任务方式

    一.前述 Spark可以和Yarn整合,将Application提交到Yarn上运行,和StandAlone提交模式一样,Yarn也有两种提交任务的方式. 二.具体      1.yarn-clien ...

  2. 死磕 java集合之TreeMap源码分析（二）- 内含红黑树分析全过程

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 插入元素 插入元素,如果元素在树中存在,则替换value:如果元素不存在,则插入到对应的位置, ...

  3. Config ConnectionStrings

    <connectionStrings> <add name ="MyschoolConnectionString" connectionString =" ...

  4. asp.net core系列 31 EF管理数据库架构--必备知识 反向工程

    一.   反向工程 反向工程是基于数据库架构,生成的实体类和DbContext类代码的过程,对于Visual Studio开发,建议使用PMC.对于其他开发环境,请选择.NET Core CLI工具( ...

  5. vs2012 aps.net 4.5尚未在web服务器上注册，您需要手动将Web服务器配置为

    系统换成Windows10安装VS2012打开项目总提示:vs2012 aps.NET 4.5尚未在web服务器上注册,您需要手动将Web服务器配置为使用ASP.net 4.5,这样您的网站才可能正确 ...

  6. 【Java基础】【16List集合】

    16.01_集合框架(去除ArrayList中重复字符串元素方式)(掌握) A:案例演示 需求:ArrayList去除集合中字符串的重复值(字符串的内容相同) 思路:创建新集合方式 /** * A:案 ...

  7. JSP面试题都在这里

    下面是我整理下来的JSP知识点: 图上的知识点都可以在我其他的文章内找到相应内容. JSP常见面试题 jsp静态包含和动态包含的区别 jsp静态包含和动态包含的区别 在讲解request对象的时候,我 ...

  8. AppBoxFuture(一): Hello Future!

      AppBoxFuture是一个快速应用框架(Rapid Application Framework),是作者十几年从事信息化建设的经验结晶.框架具备以下一些特色: 极简的分布式系统架构 根据需要可 ...

  9. javascript基础修炼(4)——UMD规范的代码推演

    javascript基础修炼(4)--UMD规范的代码推演 1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它 ...

  10. (摘)linux下yum安装redis以及使用

    1.yum install redis      --查看是否有redis   yum 源 2.yum install epel-release    --下载fedora的epel仓库 3.yum ...