Bootstrap布局自动拉伸改变大小

记录一下学习Bootstrap布局自动拉伸
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Bootstrap自动拉伸改变大小</title>
	 <script  
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>  
	<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" media="all">
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script type='text/javascript' src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
	<style>
     .row {
    margin-left:0;
    margin-right:0;
}

.row .sp {
   height:300px;
   margin-bottom:10px;
   border-bottom:3px #eee  solid;
}

.editor {
   height:300px;
   border-right:3px #eee solid;
}


@media (max-width: 939px) { 

	.row .sp {
    	width:48.62% !important;
      	
	}

}

@media (max-width: 767px) { 

	.row .sp {
    	width:100% !important;
        height:auto !important;
	}

}

@media (max-width: 1200px) { 
	.row .sp {
    	width:49.62% !important;
      	
	}
}

@media (max-width: 767px) { 

	.row .sp {
    	width:100% !important;
        height:auto !important;
	}

}

.cont {
	width:100%;
}


.inner {
	overflow-y:auto;
    overflow-x:hidden;
    height:100%;
}


.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }

        
    </style>
</head>
<body>
<div class="cont">
    <div class="row">
        <div class="col-sm-6 sp editor">
            <div class="inner">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。

时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。

遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？

嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！

勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？

呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：

滕王高阁临江渚，佩玉鸣鸾罢歌舞。

画栋朝飞南浦云，珠帘暮卷西山雨。

闲云潭影日悠悠，物换星移几度秋。

阁中帝子今何在？槛外长江空自流。</div>
        </div>
        <div class="col-sm-6 sp">
            <div class="inner">

朝搴阰之木兰兮，夕揽洲之宿莽。

日月忽其不淹兮，春与秋其代序。

唯草木之零落兮，恐美人之迟暮。

不抚壮而弃秽兮，何不改乎此度？

乘骐骥以驰骋兮，来吾道夫先路！

昔三后之纯粹兮，固众芳之所在。

杂申椒与菌桂兮，岂惟纫夫蕙茞！

彼尧、舜之耿介兮，既遵道而得路。

何桀纣之昌披兮，夫惟捷径以窘步。

惟夫党人之偷乐兮，路幽昧以险隘。

岂余身之殚殃兮，恐皇舆之败绩。

忽奔走以先后兮，及前王之踵武。

荃不查余之中情兮，反信谗而齌怒。

余固知謇謇之为患兮，忍而不能舍也。

指九天以为正兮，夫惟灵修之故也。

曰黄昏以为期兮，羌中道而改路。

初既与余成言兮，后悔遁而有他。

余既不难夫离别兮，伤灵修之数化。

余既滋兰之九畹兮，又树蕙之百亩。

畦留夷与揭车兮，杂杜衡与芳芷。

冀枝叶之峻茂兮，愿俟时乎吾将刈。

虽萎绝其亦何伤兮，哀众芳之芜秽。

众皆竞进以贪婪兮，凭不厌乎求索。

羌内恕己以量人兮，各兴心而嫉妒。

忽驰骛以追逐兮，非余心之所急。

老冉冉其将至兮，恐修名之不立。

朝饮木兰之坠露兮，夕餐秋菊之落英。

苟余情其信姱以练要兮，长顑颔亦何伤。

掔木根以结茝兮，贯薜荔之落蕊。

矫菌桂以纫蕙兮，索胡绳之纚纚。

謇吾法夫前修兮，非世俗之所服。

虽不周于今之人兮，愿依彭咸之遗则。

长太息以掩涕兮，哀民生之多艰。

余虽好修姱以鞿羁兮，謇朝谇而夕替。

既替余以蕙纕兮，又申之以揽茝。

亦余心之所善兮，虽九死其犹未悔。

怨灵修之浩荡兮，终不察夫民心。

众女嫉余之蛾眉兮，谣诼谓余以善淫。

固时俗之工巧兮，偭规矩而改错。

背绳墨以追曲兮，竞周容以为度。

忳郁邑余侘傺兮，吾独穷困乎此时也。

宁溘死以流亡兮，余不忍为此态也。

鸷鸟之不群兮，自前世而固然。

何方圜之能周兮，夫孰异道而相安？

</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 ">
            <div class="inner">
                 <h1>Bootstrap 布局</h1>
               忽吾行此流沙兮，遵赤水而容与。
麾蛟龙使梁津兮，诏西皇使涉予。
路修远以多艰兮，腾众车使径待。
路不周以左转兮，指西海以为期。
屯余车其千乘兮，齐玉轪而并驰。
驾八龙之婉婉兮，载云旗之委蛇。
抑志而弭节兮，神高驰之邈邈。
奏《九歌》而舞《韶》兮，聊假日以媮乐。
陟升皇之赫戏兮，忽临睨夫旧乡。
仆夫悲余马怀兮，蜷局顾而不行。
乱曰：已矣哉！
国无人莫我知兮，又何怀乎故都！
既莫足与为美政兮，吾将从彭咸之所居！</div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
var maxY=0 ;  //取高度最高panel作为分割栏位置
$(window).bind("resize", function(event){
  	if (this == event.target) {
		$('.sp').removeAttr('style');
    }
});


$('.editor').resizable({
    handles: 'e, s',
	minWidth:100,
  	maxWidth:900,
  	resize:function(event,ui){
    	var x=ui.element.outerWidth();
    	var y=ui.element.outerHeight();
    	var ele=ui.element;
     	var factor = $(this).parent().width()-x;
      	var f2 = $(this).parent().width() * .02999;
      	$.each(ele.siblings(),function(idx,item){
          
        	ele.siblings().eq(idx).css('height',y+'px');
          	//ele.siblings().eq(idx).css('width',(factor-41)+'px');
        	ele.siblings().eq(idx).width((factor-f2)+'px');

      	});
    }
});

$('.sp:not(.editor)').resizable({
    handles: 's',
  	resize:function(event,ui){
    	
    	var y=ui.element.outerHeight();
    	var ele=ui.element;
      	$.each(ele.siblings(),function(idx,item){
        	ele.siblings().eq(idx).css('height',y+'px');
      	});
    }
});


    
</script>
</html>
效果如下：
这里主要引用Jquery UI 的js和css 来实现自动拉伸效果
当然还有其它方法：
参考如下：https://codepen.io/anon/pen/bLeZpP
https://codepen.io/barbalex/pen/ogZWNV
Bootstrap布局自动拉伸改变大小

猜你喜欢
