Dans cet article, nous créerons une information de colonne pour votre référence. Le contenu spécifique est le suivant
L'ordre de l'analyse Google Chrome doit être chargé et exécuté
$ (fenêtre) .load (function () {$ ('. text'). eq (0) .css ('margin-top', ($ ('. auto'). eq (0) .Height () - $ ('. text'). eq (0) .height ()) / 2 + 'px');});Remarque: Pour le navigateur Firefox, vous pouvez appuyer sur Ctrl + Shift + M pour ajuster la taille du terminal mobile.
Question de titre de sous-colonne
<div> <div> <hgroup> <h1> Informations </h1> <h4> Dernières nouvelles, ressources, etc. de la formation interne d'entreprise ... </h4> </hgroup> </div> </div>
Colonne CSS
.Jumbotron {margin: 50px 0 0 0; rembourrage: 60px 0; Contexte: #ccc URL (../ img / bg.jpg); Couleur: #ccc;}. Jumbotron H1 {Font-Size: 26px; // 768,30; 992,33; 1200,36; rembourrage: 0 0 0 20px;}. Jumbotron H4 {Font-Size: 16px; // 768,16; 992,17; 1200,18 rembourrage: 0 0 0 20px;}Contenu de l'information
<div id = "Information"> <div> <div> <div> <div> <div> <div> <div> <img src = "img / info1.jpg"> </div> <div> <h4> L'administration de l'État de radio, de film et de télévision TVOS2.0 et Huawei Alibaba participent à la recherche sur la recherche sur la recherche sur la recherche sur la recherche sur le système de recherche et le développement de la recherche sur la recherche sur le système de recherche sur le système de recherche </h4> <p> Intégration de TVOS1.0, Huawei Mediaos et Alibaba Yunos. Huawei est principalement responsable des travaux de développement et Alibaba est responsable du centre commercial télévisé intégré. </p> <p> admin 15/10/11 </p> </div> </div> </div> </div> </div> <div> <lockquote> <h2> NOUVELLES POPULAIRES </H2> </ Blockquote> <div> <div> <div> <div> <div> <div style = "margin: 12px 0; padding: 0;"> <img src = "IMg / info. </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>
Contenu de l'information CSS
#Information {padding: 40px 0; Contexte: #eee;}. info-right {background-color: #ffff; Box-Shadow: 2px 2px 3px #ccc;}. Info-right BlockQuote {padding: 0; marge: 0;}. Info-droite h2 {Font-Size: 20px; rembourrage: 5px;}. info-droite h4 {line-height: 1.6;}. info-conont {background-Color: #ffff; Box-Shadow: 2px 2px 3px #ccc; marge: 0 0 20px 0;}. Info-Content img {margin: 12px 0;}. info-content h4 {Font-Size: 14px; // 768,16; 992,18; 1200,20; rembourrage: 2px 0 0 0;}. Info-Content P {line-height: 1.6; Couleur: # 666;}Pour le H4 de l'intérêt .info, une ligne est requise pour les écrans moyens et grands.
.info-contenu H4 {Overflow: Hidden; Espace blanc: Nowrap; Text-overflow: ellipsis;}Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est le code que je souhaite fermer le contenu des informations de la sous-colonne de production de bootstrap. J'espère que tout le monde aime ça.