1. 程式人生 > >Bootstrap佈局自動拉伸改變大小

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