1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!--移动设备优先-->
  8.     <title>bootstrap</title>
  9.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  10.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.  
  12.     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  13.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  14.  
  15.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  17.     <style>
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="container">
  22.     <div class="row">
  23.         <div class="col-sm-4">
  24.             <img src="//img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png" alt="" class="img-responsive"/>
  25.  
  26.             <p>hello</p>
  27.             <a href="">hello</a>
  28.             <h1>h1标题<small>小字体</small></h1>
  29.             <h2>h2标题</h2>
  30.             <h3>h3标题</h3>
  31.             <h4>h4标题</h4>
  32.             <h5>h5标题</h5>
  33.             <h6>h6标题</h6>
  34.             <p class="h1">p h1标题</p>
  35.             <p class="h2">p h2标题</p>
  36.             <p class="h3">p h3标题</p>
  37.             <p class="h4">p h4标题</p>
  38.             <p class="h5">p h5标题</p>
  39.             <p class="h6">p h6标题</p>
  40.             <p class="lead text-center">
  41.                 lead强调 居中对齐
  42.             </p>
  43.         </div>
  44.         <div class="col-sm-8">
  45.             <abbr title="跟我一起学习english" class="initialism">学习english initialism大写的意思</abbr>
  46.             <address>
  47.                 <strong>Twitter, Inc.</strong><br>
  48.                 Folsom Ave, Suite 600<br>
  49.                 San Francisco, CA 94107<br>
  50.                 <abbr title="Phone">P:</abbr> (123) 456-7890
  51.             </address>
  52.             <address>
  53.                 <strong>Full Name</strong><br>
  54.                 <a href="mailto:#">first.last@example.com</a>
  55.             </address>
  56.  
  57.             </p>
  58.  
  59.             <blockquote  class="pull-right">
  60.                 <p>
  61.                     Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0...
  62.                 </p>
  63.                 <small>来自<em>bootstrap中文网</em></small>
  64.             </blockquote>
  65.  
  66.         </div>
  67.     </div>
  68. </div>
  69.  
  70. </body>
  71. </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. oss滤网图片音视频过滤(1)内容检测

    图片音视频过滤有好多方法,我这里就不一一介绍了,这篇文章只是简单介绍一下我在项目中使用阿里云oss滤网过滤的步骤 1.所遇问题: 1.图片视频鉴别时要设置textScanRequest.setUriP ...

  2. 第4章 同步控制 Synchronization ---哲学家进餐问题（The Dining Philosophers）

    哲学家进餐问题是这样子的:好几位哲学家围绕着餐桌坐,每一位哲学家要么思考,要么等待,要么就吃饭.为了吃饭,哲学家必须拿起两支筷子(分放于左右两端).不幸的是,筷子的数量和哲学家相等,所以每支筷子必须由 ...

  3. Array Partition I

    Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1 ...

  4. jdbc与mybatis区别

    jdbc的缺点: 1.频繁创建连接,浪费资源 2.SQL语句硬编码,不利于维护 3.传参是硬编码,不利于维护 4.结果集是硬编码,不利于维护 但是mybatis很好的解决了这些问题.

  5. 最好用的css辅助工具——SASS&LESS

    前言 首先,小编给大家解释一下什么是SCSS和LESS,Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables).嵌套 (nested rules).混合 ...

  6. VB.NET 中 ComboBox 如何清除选项--- 使用Dataset 赋值 DataSource 的时候

    如题: 在 使用Dataset 赋值 DataSource 的时候,网络上很多都是:ComboBox2.DataSource = Null 然并卵,很高兴告诉大家:Null 在VB.NET中是没用的: ...

  7. VNC实现Windows远程访问Ubuntu 16.04（无需安装第三方桌面）

    本文主要是讲解如果理由VNC实现Windows远程访问Ubuntu 16.04,其实网上有很多类似教程,但是很多需要安装第三方桌面(xfce桌面等等),而且很多人不太喜欢安装第三方桌面,很多人像笔者一 ...

  8. git-分支使用方式

    需求场景:假如你看着教程完成了一个项目,但是感觉第一次代码掌握不牢,想要进行第二次代码练习--如果某某心里想我还有初始备份文件,我此时的心里独白是你的硬盘还够用吗o(╯□╰)o 1 创建一个新分支 - ...

  9. zoj 1108 FatMouse's Speed 基础dp

    FatMouse's Speed Time Limit: 2 Seconds      Memory Limit:65536 KB     Special Judge FatMouse believe ...

  10. 扩展jquery.validate自定义验证，自定义提示，本地化

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...