In this article, we will create a column information for your reference. The specific content is as follows
The order of Google Chrome parsing needs to be loaded and executed
$(window).load(function() { $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');});Note: For Firefox browser, you can press Ctrl+Shift+M to adjust the mobile terminal size.
Sub-column title question
<div> <div> <hgroup> <h1>Information</h1> <h4> Latest news, resources, etc. of corporate internal training...</h4> </hgroup> </div></div>
Column CSS
.jumbotron { margin: 50px 0 0 0; padding: 60px 0; background: #ccc url(../img/bg.jpg); color: #ccc;}.jumbotron h1 { font-size: 26px;//768,30; 992,33; 1200,36; padding: 0 0 0 20px;}.jumbotron h4 { font-size: 16px;//768,16; 992,17; 1200,18 padding: 0 0 0 20px;}Information content
<div id="information"> <div> <div> <div> <div> <div> <div> <div> <img src="img/info1.jpg" > </div> <div> <h4>The State Administration of Radio, Film and Television released TVOS2.0 and Huawei Alibaba participated in the research and development</h4> <p> TVOS2.0 is a new generation of smart TV operating system created based on the integration of TVOS1.0, Huawei MediaOS and Alibaba YunOS. Huawei is mainly responsible for development work, and Alibaba is responsible for the built-in TV shopping mall. </p> <p> admin 15 / 10 / 11 </p> </div> </div> </div> </div> </div> <div> <blockquote> <h2>Popular News</h2> </blockquote> <div> <div> <div> <div> <div> <div> <div style="margin:12px 0;padding:0;"> <img src="img/info3.jpg" > </div> <div style="padding-right:0"> <h4>Title</h4> <p> admin 15 / 10 / 11 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Information content CSS
#information { padding: 40px 0; background: #eee;}.info-right { background-color: #ffff; box-shadow: 2px 2px 3px #ccc;}.info-right blockquote { padding: 0; margin: 0;}.info-right h2 { font-size: 20px; padding: 5px;}.info-right h4 { line-height: 1.6;}.info-content { background-color: #ffff; box-shadow: 2px 2px 3px #ccc; margin: 0 0 20px 0;}.info-content img { margin: 12px 0;}.info-content h4 { font-size: 14px;//768,16; 992,18; 1200,20; padding: 2px 0 0 0;}.info-content p { line-height: 1.6; color: #666;}For .info-content h4, one line is required for the medium and large screens.
.info-content h4 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is the code that I want to close the information content of the Bootstrap production subcolumn. I hope everyone likes it.