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. Python 创建递归文件夹

    # 创建递归文件夹 def createfiles(filepathname): try: os.makedirs(filepathname) except Exception as err: pri ...

  2. Docker 下载镜像

    文章首发个人网站: https://www.exception.site/docker/docker-pull-image 本文中,我们将需要学习 Docker 如何下载镜像? 一.前言 大家都知道, ...

  3. 从锅炉工到AI专家(11)(END)

    语音识别 TensorFlow 1.x中提供了一个语音识别的例子speech_commands,用于识别常用的命令词汇,实现对设备的语音控制.speech_commands是一个很成熟的语音识别原型, ...

  4. Java基础13：反射详解

    本节主要介绍Java反射的原理,使用方法以及相关的技术细节,并且介绍了关于Class类,注解等内容. 具体代码在我的GitHub中可以找到 https://github.com/h2pl/MyTech ...

  5. MySQL系列--2.常用的命令

    1 .创建数据库 #语法: CREATE DATABASE dbName; #创建数据库rms create database rms; 2.切换数据库 #选择数据库 USE dbName; #选择数 ...

  6. windows下用cmd命令netstat查看系统端口使用情况

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...

  7. Java开发知识之Java编程基础

    Java开发知识之Java编程基础 一丶Java的基础语法 每个语言都有自己的语法规范.例如C++ 入口点是main. 我们按照特定格式编写即可. Java也不例外. Java程序的语法规范就是 Ja ...

  8. pwnable.tw unexploitable 分析

    这题是和pwnable.kr差不多的一道题,主要区别在于没有给syscall.所以需要自己去找. 只有read和sleep两个函数. 思路一是首先劫持堆栈到bss段,然后调用read函数将sleep的 ...

  9. iptables 指南

    iptables 是 Linux 内核集成的防火墙系统, 几乎所有 Linux 发行版都会内置 iptables. iptables 对进出的 IP 数据报进行处理和过滤, 过滤规则(rule)存储在 ...

  10. .Net语言 APP开发平台——Smobiler学习日志：基于Access数据库的Demo

    说明:该demo是基于Access数据库进行客户信息的新增.查看.编辑 新增客户信息和客户列表 Demo下载:https://github.com/comsmobiler/demo-videos  中 ...