一．      下载bootstrap-3.3.7

二．      在html页面引入css,js;

eg:

 <link src="bootstrap-3.3.7-dist/css/bootstrap.min.css">

 <script type="text/javascript" src="jquery.min.js"></script>

 <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

注意：因为会用到jquery，所以引入了jquery .js;

三.body部分的代码是这样的：

<body style="margin: 10px;padding: 0px">

    <div class="left">  

    </div>

    <div class="right">

    </div>

<body/>

简单解析下：

body里包含两个div ,一个在左边排列(用于放图片)，一个在右边排列(用于放文字);都用class名进行区分啦，left和right;

简单的给两个div添加点样式：

  .left {

            float: left;

            max-width: 43%;

            padding-left: 5px;

        }

 .right {

            margin-left: 5px;

        }

现在还看不出什么效果;

  1. 给第一个div里添加图片;
<img src="index.jpg" class="img-responsive" alt="图像">
  1. 给第二个div添加文字，里面的文字是采用Boostrap的样式;
      <div class="container">

                <h1>图文环绕</h1>

                <div class="row">

                  <div class="col-xs-6 col-md-offset-3" style=" box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;">

                        <div class="row">

                            <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;">

                                <p>&nbsp;&nbsp;&nbsp;风雨中走过却不安世事的心</p>

                            </div>

                      </div>

                               <p>&nbsp;&nbsp;&nbsp;我还是很喜欢你，像风走了三千米不问归期 我希望有个如你一般的人如山间清爽的风如古城温暖的光从清晨到夜晚由山野到书房只要最后是你就好 </p>

                 </div>

                <div class="col-xs-6 col-sm-offset-3" style="box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;">

                      <p>&nbsp;&nbsp;&nbsp;我觉得这个世界美好无比。晴时满树花开，雨天一湖涟漪，阳光席卷城市，微风穿越指间，入夜每个电台播放的情歌，沿途每条山路铺开的影子，全部是你不经意写的一字一句，留我年复一年朗读。这世界是你的遗嘱，而我是你唯一的遗物。

                      </p>

                      <p>&nbsp;&nbsp;一个人的记忆就是座城市，时间腐蚀着一切建筑，把高楼和道路全部沙化。如果你不往前走，就会被沙子掩埋。所以我们泪流满面，步步回头，可是只能往前走 </p>

               </div>

               <div class="clearfix visible-xs"></div>

                  <div class="col-xs-6 col-md-offset-3" style=" box-shadow:inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;">

                   <p>&nbsp;&nbsp;&nbsp;你燃烧，我陪你焚成灰烬。你熄灭，我陪你低落尘埃。你出生，我陪你徒步人海。你沉默，我陪你一言不发，你欢笑，我陪你山呼海啸。你衰老，我陪你满目疮痍。你逃避，我陪你隐入夜晚。你离开，我只能等待。 </p>

               </div>

             <div class="col-xs-6 col-sm-offset-3" style="box-shadow: inset 1px -1px 1px #ccc, inset -1px 1px 1px #ccc;">

                 <p>我希望买的鞋子是你渴望的颜色。我希望拨通电话时你恰好在想我。我希望说早安你也刚起床。我希望写的书是你欣赏的故事。我希望关灯的刹那你正泛起困意。我希望买的水果你永远觉得是甜的。我希望点的歌都是你喜欢唱的。我希望我希望的是你希望的。

                  </p>

             </div>

             <div class="clearfix visible-xs"></div>

    </div>

  </div>

采用的是bootstrap的架构： container> row> column

将css样式也写在标签上，所以有点看起来复杂，其实很简单，这几段文字的结构都一样。

看看运行效果：

拖动页面试试：

你可以通过控制台随意拖动页面的宽度，看看文字的适配程度。

源码：

https://github.com/sulishibaobei/bootstrap/tree/master/bootstrap%20by%20around

另外有两个免费网站模板也可以看看，在同一个github路径下

bootstrap简单图文环绕效果的更多相关文章

  1. 简单的环绕散射 Simple Wrap Diffuse From GPU GEMS1

    简单的环绕漫反射光照,实现起来特别简单,在Shader中加入以下几行:  float diffuse = max(0,dot(L,N));  float wrap_diffuse = max(0, ( ...

  2. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  3. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  5. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  6. Cocos2d-x实现简单的翻牌效果

    触发器互联网影响找了很多.有自己的点重写一个复杂的sprite类来实现.简单的操作来对引擎的使用CCOrbitCamera实现,但是,也存在一些问题,后变反了. 我在用的仅仅是一个简单的翻牌效果,点击 ...

  7. 学习Jammendo代码的心路历程（一）简单的淡出效果实现

    最近在看 Jammendo代码,打算将学习过程简单的记录下来,下面开始第一篇: 打开Jammendo运行之后,出弹出一个对话框,跳过对话框之后,会有一个淡出界面跳转到首页效果的实现.那么这个效果是怎么 ...

  8. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

  9. Css实现一个简单的幻灯片效果页面

    使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

随机推荐

  1. ASP.NET MVC框架开发系列教程

    本系列教程是自己在工作中使用到而记录的,如有错误之处,请给与指正 文章目录 MVC4 开篇 第一章 初识MVC4 第二章 下山遇虎(@helper) 第三章 Models模块属性详解 第四章 在MVC ...

  2. SpringMVC ModelAndView、Map、Model、ModelMap

    目标方法返回值可以是ModelAndView .Map.Model.ModelMap类型,但最根本还都是ModelAndView. 其中可以包含试图和模型信息. SpringMVC 会把ModelAn ...

  3. js 错误Error对象详解

    一.概念 error,指程序中的非正常运行状态,在其他编程语言中称为"异常"或"错误".解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信 ...

  4. webstorm方向键与电脑快捷键冲突

    1.桌面上,单击鼠标右键,选择"图形属性" 2.单击"选项和支持" 3.在图示框框中,修改电脑上的快捷键  

  5. android自定义文本框，后面带清空按钮

    android常见的带清空按钮的文本框,获得焦点时如果有内容则显示,否则不显示 package com.qc.health.weight; import com.qc.health.R; import ...

  6. c#之依赖注入

    C# 依赖注入 http://www.cnblogs.com/leoo2sk/archive/2009/06/17/1504693.html 1 IGame游戏公司的故事 1.1 讨论会 话说有一个叫 ...

  7. 老版VC++线程池

    在一般的设计中,当需要一个线程时,就创建一个,但是当线程过多时可能会影响系统的整体效率,这个性能的下降主要体现在:当线程过多时在线程间来回切换需要花费时间,而频繁的创建和销毁线程也需要花费额外的机器指 ...

  8. 一键下载你的youtube视频

    很多人喜欢逛油管看视频,自然就会有一些喜欢的收藏集或者视频作者,有时候想要下载下来保存在本地播放,这样的话就不用每次FQ,毕竟有些代理的速度并不是很理想(如果你的代理速度炒鸡快的话,请忽略这篇文章). ...

  9. Chris Richardson微服务翻译：微服务之事件驱动的数据管理

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现 微服务之事件驱动的数据管理(本文) 微服 ...

  10. 大数据分析中Redis怎么做到220万ops

    大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每天修改系统,重新跑数据,这就要求极高的海 ...