一．      下载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. PCA主成份分析

    1   背景介绍 真实的训练数据总是存在各种各样的问题: 1. 比如拿到一个汽车的样本,里面既有以“千米/每小时”度量的最大速度特征,也有“英里/小时”的最大速度特征,显然这两个特征有一个多余. 2. ...

  2. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  3. zabbix借助onealert实现微信报警

    官网:http://wiki.110monitor.com/integration/zabbix-manual.html) Zabbix安装包部署方式 1)下载agent软件包 请在Zabbix服务器 ...

  4. Excel数据导入至Dataset中

    public static DataSet ExcelToDataSet(string ppfilenameurl,string pptable) { string strConn = "P ...

  5. CSS 参考手册

    CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...

  6. 在ssh框架中service,action,jsp,formbeam,dao的调用顺序

    本文来自:http://blog.csdn.net/w_basketboy24/article/details/8642846 jsp发起请求. actionform封装请求参数. action接受请 ...

  7. canvas 简易的加载进度条

    做一个web app,想在第一次或者更新的时候,有一个更新进度条,我个人比较喜欢圆的那种. canvas + svg高低配,应该还不错的.顺便一提,canvas用来压缩图片也是么么哒的. 先看下效果图 ...

  8. 什么是BIG？如何买BIG？

    谈到BIG,就要谈到BIG ONE.BigONE号称"全民交易所",也称"云币国际站".是 INBlockchian(硬币资本)旗下全球区块链资产现货交易所,是 ...

  9. ［转］在Mac系统中安装配置Tomcat及和Eclipse 配置

    第一步:下载Tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 直接下载如下选中即可: 第二步:   下载完成后 ,把解压的文件夹放到一个目录下 ...

  10. Fineui js getText

    需要自己写js的时候.需要取值. var ddlgenderid='<%=ddlgender.clientID%>';function reader(value){f(ddlgenderi ...