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. vue+cordova构建跨平台应用集成并使用Cordova plugin

    安装 //安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g cordova 新建项目 //新建cordova 项 ...

  2. slice全解析

    slice全解析 昨天组内小伙伴做分享,给出了这么一段代码: package main import ( "fmt" ) func fun1(x int) { x = x + 1 ...

  3. java代码之美（8）---guava字符串工具

    guava字符串工具 在java开发过程中对字符串的处理是非常频繁的,google的guava工具对字符串的一些处理进行优化,使我们开发过程中让自己的代码看去更加美观,清爽. 一.Joiner 根据给 ...

  4. Dubbo(二) —— dubbo配置

      一.配置原则 JVM 启动 -D 参数优先,这样可以使用户在部署和启动时进行参数重写,比如在启动时需改变协议的端口. XML 次之,如果在 XML 中有配置,则 dubbo.properties ...

  5. 纽约工作日志流水账 Day 2

    今天本来想一觉睡到早上7点,结果凌晨2点30就行了,然后就各种睡不着了. 挣扎到5点,饿的不行,就起来找东西吃,发现冰箱里东西真不少. 8点半,开始和亢爷做早饭,自制俩汉堡,样子略丑, 味道还不错.这 ...

  6. C++版 - 剑指Offer 面试题39：二叉树的深度(高度)(二叉树深度优先遍历dfs的应用) 题解

    剑指Offer 面试题39:二叉树的深度(高度) 题目:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度.例如:输入二叉树 ...

  7. Java基础9：解读Java回调机制

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  8. 17-Flink消费Kafka写入Mysql

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  9. leetcode — subsets

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  10. 设计模式总结篇系列：外观模式（Facade）

    张三自从毕业后开始做软件开发,做着做着发现不爽了,钱赚不了太多,头发也白了.于是拿着一点小资本,想着做点小生意.瞅着眼前的餐饮行业还不错,于是打算开一家餐馆.开参观可不是一件容易的事,仅仅行政类的审批 ...