Informations pratiques sur les sous-colonnes du projet Bootstrap compétences content_javascript

Dans cet article, nous avons créé une colonne de contenu informatif pour votre référence. Le contenu spécifique est le suivant

Ajustez l'ordre d'analyse de Google Chrome, qui doit être exécuté après avoir tout chargé

$(window).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 mobile.
Titre de la sous-colonne

<div class="jumbotron">
  <div class="container">
    <hgroup>
      <h1>资讯</h1>
      <h4>企业内训的最新动态、资源等...</h4>
    </hgroup>
  </div>
</div>

Colonne 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;
}

Contenu des informations

<div id="information">
  <div class="container">
    <div class="row">
      <div class="col-md-8 info-left">
        <div class="container-fluid" style="padding:0;">
          <div class="row info-content">
            <div class="col-md-5 col-sm-5 col-xs-5">
              <img src="img/info1.jpg"
              class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
              <h4>广电总局发布 TVOS2.0 华为阿里参与研发</h4>
              <p class="hidden-xs">
                TVOS2.0 是在 TVOS1.0 与华为 MediaOS 及阿里巴巴 YunOS 融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
              </p>
              <p>
                admin 15 / 10 / 11
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 info-right hidden-xs hidden-sm">
        <blockquote>
          <h2>热门资讯</h2>
        </blockquote>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5"
            style="margin:12px 0;padding:0;">
              <img src="img/info3.jpg"
              class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7"
            style="padding-right:0">
              <h4>标题</h4>
              <p>
                admin 15 / 10 / 11
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Contenu des informations CSS

#information {
  padding: 40px 0;
  background: #eee;
}
.info-right {
  background-color: #fff;
  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: #fff;
  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;
}

Pour le contenu .info h4, une ligne doit être maintenue sur les écrans moyens et grands.

.info-content h4 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Pour plus d'informations, veuillez vous référer à : Tutoriel d'apprentissage Bootstrap

Ce qui précède est le code pour créer du contenu d'informations de sous-colonne à l'aide de Bootstrap. J'espère que vous l'aimerez.