<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <img src="//img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png" alt="" class="img-responsive"/>

            <p>hello</p>
            <a href="">hello</a>
            <h1>h1标题<small>小字体</small></h1>
            <h2>h2标题</h2>
            <h3>h3标题</h3>
            <h4>h4标题</h4>
            <h5>h5标题</h5>
            <h6>h6标题</h6>
            <p class="h1">p h1标题</p>
            <p class="h2">p h2标题</p>
            <p class="h3">p h3标题</p>
            <p class="h4">p h4标题</p>
            <p class="h5">p h5标题</p>
            <p class="h6">p h6标题</p>
            <p class="lead text-center">
                lead强调 居中对齐
            </p>
        </div>
        <div class="col-sm-8">
            <abbr title="跟我一起学习english" class="initialism">学习english initialism大写的意思</abbr>
            <address>
                <strong>Twitter, Inc.</strong><br>
                Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>
                <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
                <strong>Full Name</strong><br>
                <a href="mailto:#">first.last@example.com</a>
            </address>

            </p>

            <blockquote  class="pull-right">
                <p>
                    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0...
                </p>
                <small>来自<em>bootstrap中文网</em></small>
            </blockquote>

        </div>
    </div>
</div>

</body>
</html>

③bootstrap文本使用基础案例的更多相关文章

  1. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  2. Bootstrap文本排版基础--Bootsrap

    1.排版前的基础 (1)移动设备优先 <meta name="viewport" content="width=device-width, initial-scal ...

  3. 【10】了解Bootstrap栅格系统基础案例（5）

    这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...

  4. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  5. 【8】了解Bootstrap栅格系统基础案例（3）

    这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...

  6. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  7. ⒂bootstrap组件 折叠 基础案例

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

  8. ⒀bootstrap组件 选项卡 基础案例

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

  9. ⑤bootstrap表格使用基础案例

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

随机推荐

  1. hdu1760博弈SG

    A New Tetris Game Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. 利用python生成交换机的VRF配置文件

    为了快速生成有规律的VRF,写了一个python脚本,可以快速生成如下的VRF配置. ip vpn-instance  vpn0ipv4-family  route-distinguisher 600 ...

  3. WPF DataGrid复制单元格问题

    当复制出现 以下错误时:System.Runtime.InteropServices.COMException (0x800401D0),这是在WPF剪贴板程序错误. 解决方法:则在需要在App.xa ...

  4. win10 uwp 弹起键盘不隐藏界面元素

    本文主要讲,在我们使用手机输入的时候,会因为手机的虚拟键盘隐藏了一些界面的元素.我们有一个简单的方法让虚拟键盘不隐藏界面元素. 我们需要的界面元素是在显示了虚拟键盘后的空间能全部显示,如果不能的话,还 ...

  5. 最美时光第三方UWP源码公开

    自己大概写了一个星期的成果.. 使用了官方最美时光app的UI和图片资源,并没有调用官方接口 https://files.cnblogs.com/files/loyieking/NiceCountDo ...

  6. ELK简介

    什么是ELK ELK是ElasticSearch,LogStash以及Kibana三个产品的首字母缩写.是可以和商业产品 Splunk 相媲美开源项目. 2013 年,Logstash 被 Elast ...

  7. Akka（31）： Http：High-Level-Api，Route rejection handling

    Route 是Akka-http routing DSL的核心部分,使用户能比较方便的从http-server的角度筛选http-request.进行server运算.构建回复的http-respon ...

  8. （转）Java中使用正则表达式的一个简单例子及常用正则分享

    转自:http://www.jb51.net/article/67724.htm 这篇文章主要介绍了Java中使用正则表达式的一个简单例子及常用正则分享,本文用一个验证Email的例子讲解JAVA中如 ...

  9. 【Spring】构建Spring Web应用

    前言 学习了Spring的注解.AOP后,接着学习Spring Web,对于Web应用开发,Spring提供了Web框架. Web应用 Spring MVC初探 MVC为(Model-View-Con ...

  10. javascript方法的方法名慎用close

    通常我们在定义了与window同名的方法时,会自动覆盖掉window同名的方法.close()方法也不例外.示例: <!DOCTYPE html PUBLIC "-//W3C//DTD ...