<!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. Tomcat启动错误【Error listenerStart】

    今天启动Tomcat启动不了,报以下错: org.apache.catalina.core.StandardContext startInternal SEVERE: Error listenerSt ...

  2. Linux入门之常用命令（10）软连接 硬链接

    在Linux系统中,内核为每一个新创建的文件分配一个Inode(索引结点),每个文件都有一个惟一的inode号.文件属性保存在索引结点里,在访问文件时,索引结点被复制到内存在,从而实现文件的快速访问. ...

  3. python爬取煎蛋图片

    py2版本: #-*- coding:utf-8 -*- #from __future__ import unicode_liter import urllib,urllib2,time import ...

  4. vue + ajax + php 接口的使用小接

    vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...

  5. sbt 配置文件

    配置文件名:application.conf, VM options: -Dconfig.file=application.conf 配置文件内容规范: openStrategy{ alive { a ...

  6. Linux-问题集锦(1)

    一. 某用户只读特定文件夹 只读目录 :  /home/www/yqz/logs 1.  创建用户        useradd ReadOnly        passwd ReadOnly 2. ...

  7. JAVA中子类会不会继承父类的构造方法

    声明:刚刚接触java不久,如果理解有错误或偏差望各位大佬强势批判 java中子类能继承父类的构造方法吗? 父类代码: class Father { String name ; //就不set/get ...

  8. WAMPServer配置修改及问题汇总

    备忘录 软件版本wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b -------------------------------------- ...

  9. Spring装配Bean之Java代码装配bean

    尽管通过组件扫描和自动装配实现Spring的自动化配置很方便也推荐,但是有时候自动配置的方式实现不了,就需要明确显示的配置Spring.比如说,想要将第三方库中的组件装配到自己的应用中,这样的情况下, ...

  10. 安装阿里Java代码规约插件

    概述 2017年10月14日杭州云栖大会,Java代码规约扫描插件全球首发仪式正式启动,规范正式以插件形式公开走向业界,引领Java语言的规范之路.目前,插件已在云效公有云产品中集成,立即体验!(云效 ...