<!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. MyCAT-EYE开源

    MyCAT EYE MySQL数据库监控工具,实现了对MySQL节点的管理和监控,可供开发人员和DBA使用.后续版本将整合MyCAT2.0的管理和配置. 演示地址: 开发人员视图:http://120 ...

  2. 快速搭建应用服务日志收集系统(Filebeat + ElasticSearch + kibana)

    快速搭建应用服务日志收集系统(Filebeat + ElasticSearch + kibana) 概要说明 需求场景,系统环境是CentOS,多个应用部署在多台服务器上,平时查看应用日志及排查问题十 ...

  3. 使用SQLite做本地数据缓存的思考

    前言 在一个分布式缓存遍地都是的环境下,还讲本地缓存,感觉有点out了啊!可能大家看到标题,就没有想继续看下去的欲望了吧.但是,本地缓存的重要性也是有的! 本地缓存相比分布式缓存确实是比较out和比较 ...

  4. jP61 2.15

    import java.util.Scanner; public class Distance { public static void main(String[] args) {    Scanne ...

  5. Python日期时间Date/Time

    Python程序可以处理多种方式的日期和时间.日期格式之间的转换是一种常见计算机的杂活. Python的时间和日历模块,能帮助处理日期和时间. Tick是什么? 为时间间隔,以秒为单位的浮点数.从“新 ...

  6. es6零基础学习之项目目录创建（一）

    和大家分享一下在学习es6的过程中所积累的东西,也希望更多的朋友能够互相学习 首先创建项目目录 打开你的命令行,什么文件下都可以,大家请随意,我自己用的git,输入 mkdir es6 创建一个完整的 ...

  7. 基于HTML5和WebGL的3D网络拓扑结构图

    现在,3D模型已经用于各种不同的领域.在医疗行业使用它们制作器官的精确模型:电影行业将它们用于活动的人物.物体以及现实电影:视频游戏产业将它们作为计算机与视频游戏中的资源:在科学领域将它们作为化合物的 ...

  8. Extjs6（四）——侧边栏导航根据路由跳转页面

    本文基于ext-6.0.0 之前做的时候这个侧边栏导航是通过tab切换来切换页面的,但是总感觉不太对劲,现在终于发现怎么通过路由跳转了,分享给大家,可能有些不完善的地方,望大家读后可以给些指点.欢迎留 ...

  9. Xamarin Forms 进度条控件

    本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/ 里面都是胡说的,如果看不 ...

  10. 【NOIP2016 Day1 T2】天天爱跑步

    题目传送门:https://www.luogu.org/problemnew/show/P1600 感觉这两天在处理边界问题上有点神志不清......为了从80的暴力变成100,花了整整一个下午+一个 ...