一．      下载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. Linux下Jdk的安装和jdk环境变量的设置

    我们在Linux下安装系统软件的时候,经常遇到一些系统环境变量配置的问题.什么是环境变量?如何定制环境变量?我将在下面做一些介绍.一.什么是环境变量?Linux是一个多用户的操作系统.多用户意味着每个 ...

  2. vue2.0 如何在hash模式下实现微信分享

    最近又把vue的demo拿出来整理下,正好要做"微信分享"功能,于是遇到新的问题: 由于hash模式下,带有"#",导致微信分享的签证无效:当改成history ...

  3. Java学习笔记23（Calendar类）

    Calendar意味日历,对Date类中的很多方法做了改进 Calendar类是一个抽象类,不可以见对象,需要子类完成实现 不过这个类有特殊之处,不需要创建子类对象,而是使用它的静态方法直接获取: 示 ...

  4. Oracle (11g) 修改默认的用户名及密码

    Oracle11g的云盘连接 Q1:安装完成Oracle数据后如何登录? A1:打开cmd窗口,输入sqlplus / as sysdba 后回车,以超级管理员身份登录,成功后如图所示(可以看到是or ...

  5. 【矩阵快速幂】bzoj1297 [SCOI2009]迷路

    1297: [SCOI2009]迷路 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1407  Solved: 1007[Submit][Status ...

  6. Linux之 网卡发包、接包 error 、droped 情况

    1. 查看各个网卡发送.接受包情况oracle@hbdw2:/oratmp2$netstat -niKernel Interface tableIface MTU Met RX-OK RX-ERR R ...

  7. 【读书笔记】【深入理解ES6】#4-扩展对象的功能性

    对象类别 ES6规范清晰定义了每一个类别的对象. 普通(Ordinary)对象 具有JS对象所有的默认内部行为 特异(Exotic)对象 具有某些与默认行为不符的内部行为 标准(Standard)对象 ...

  8. linux下使用 FreeRDP 连接 Windows 远程桌面(转)

    这是一种最简单的使用方法,转载自http://wenzhixin.net.cn/2014/03/16/ubuntu_xfreerdp 简介 FreeRDP 是一款开源的远程桌面系统,支持多种平台, 在 ...

  9. 积累jquery一些有意思的函数

    $("#btn").unbind("click"); // 让btn这个元素的点击事件失效 $("#btn").unbind(); // 让 ...

  10. EXP导出aud$报错EXP-00008,ORA-00904 解决

    主题:EXP导出aud$报错EXP-00008,ORA-00904 解决 环境:Oracle 11.2.0.4 问题:在自己的测试环境,导出sys用户下的aud$表报错. 1.故障现场 2.跟踪处理 ...