一．      下载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. Java语言的概述？-什么是Java？ (附一张Java工程师的学习路线图)

    什么是Java? Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向 ...

  2. JS中将一个值转换为字符串的3种方法

    1.value.toString() 2."" + value 3.String(value) 第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种 ...

  3. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  4. angular4.0配置同时使用localhost和本机IP访问项目

    之前写过<angular4.0配置本机IP访问项目>的文章,今天再次更新一个,谢谢大家的指正. 今天的目的是:使用本机IP地址,或者localhost都可以访问项目. 第一步:找到此文件& ...

  5. iOS 动画篇 之 Core Animation （一）

    iOS中实现动画有两种方式,一种是自己不断的通过drawRect:方法来绘制,另外一种就是使用核心动画(Core Animation). 导语: 核心动画提供高帧速率和流畅的动画,而不会增加CPU的负 ...

  6. SGML、HTML、XML、XHTML的关系

    我们先看看它们的历史起源: SGML--1986年国际标准化组织出版发布了一个信息管理方面的国际标准(ISO 8879:1986信息处理). HTML 2.0--1995年11月作为RFC 1866发 ...

  7. MariaDB的"response time"插件

    "响应时间"是衡量数据库性能的常用指标.在MariaDB中可以使用插件"QUERY_RESPONSE_TIME"来获取查询时间区间的统计信息. // 安装插 件 ...

  8. vue单页面打包文件大？首次加载慢？按需加载？是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. oracle分页，带有排序字段

    select detail_num,carriage_num,ed_date,created_date from (select rownum id,detail_num,carriage_num,e ...

  10. Jmeter脚本调试之关联----（正则表达式）

    脚本调试 关联,在脚本中,是必应用到的一个设置方法,将脚本中,每次都会动态变化的特殊值进行关联.一个能正确执行的脚本,都需要进行关联(LR.jmeter). Jmeter关联: 在脚本回放过程中,客户 ...