このレッスンの最初の部分では、Carousel画像の下にコンテンツの紹介を設計します。コンテンツの紹介は2つの部分に分かれています。今回は前半です。
1つ。ホームページのコンテンツはじめに
//最後のクラスのカルーセル図については、実際にマニュアルにはより良いソリューションがあり、追加のコード制御は必要ありません。 <a href = "＃mycarousel" data-slide = "prev"> <span> </span> </a> <a href = "＃mycarousel" data-slide = "next"> <span> </span> </a> //コンテンツ紹介
<div> <div> <h2> "Piaochengエンタープライズトレーニングを選択する理由" </h2> <p>強力な教員と完璧な実践的な管理コースにより、会社は定性的な離陸を達成できます！ </p> <div> <div> <div> <div> <a href = "＃"> <img src = "img/tab1-1.png"> </a> </div> <div> <hh4> <p>その他：大学や大学の未知の講師によって書かれています。 </p> <p>その他：有名な起業家と管理マスターが共同で編集する現実的な教科書！ </p> </div> </div> </div> <div> <div> <a href = "＃"> <img src = "img/tab1-2.png"> </a> </div> <div> <h4> </h4> <p>その他：ヨーロッパとアメリカの大学ではなく、業界の評判がない講師！ </p> <p>その他：米国のハーバードやイェールなどの世界クラスの大学、そして評判のある有名なブランドの専門家！ </p> </div> </div> </div> <div> <div> <a href = "＃"> <img src = "img/tab1-3.png"> </a> </div> <div> <h4>クラススケジュール</h4> <p>その他：クラス効率は保証できません。 </p> <p>その他：通常のクラスの効率を確保し、スケジュールを策定し、同じ日にタスクを完了します！ </p> </div> </div> </div> <div> <div> <a href = "＃"> <img src = "img/tab1-4.png"> </a> </div> <div> <h4>サービスチーム</h4> <p>その他：通常の従業員が採用され、団体サービスレベルを持っています！ </p> <p>その他：優れたハイエンドサービストレーニングを受けたハイスタンダード従業員の内部トレーニング！ </p> </div> </div> </div> </div> </div> </div> </div> </div>
対応するCSS部分
Body {font-family： "Helvetica neue"、Helvetica、arial、 "Microsoft yaheiui"、 "Microsoft yaheiui"、simhei、 "/5b8b/4f53"、simsun、sans-serif;}。tab-h2 {font-size：20px;色：＃0059B2;テキストアライグ：センター;文字間隔：1px;}。tab-p {font-size：15px;色：＃999;テキストアライグ：センター;レター間隔：1px;マージン：20px 0 40px 0;}。tab1 {margin：30px 0;色：＃666;}。tab1 .media-heading {margin：5px 0 20px 0;}。tab1 .text-muted {color：＃999;テキストデコレーション：ラインスルー;}。tab1 .media-heading {margin：5px 0 20px 0;}。tab1 .text-muted {color：＃999;テキストデコレーション：ラインスルー;}。tab1 .col {padding：20px;}/ *小さな画面（タブレット、768px以上） */@media（min-width：768px）{.tab-h2 {font-size：26px; } .tab-p {font-size：16px; }}/ *中画面（デスクトップディスプレイ、992px以上） */@media（min-width：992px）{.tab-h2 {font-size：28px; } .tab-p {font-size：17px; }}/ *大画面（大型デスクトップディスプレイ、1200px以上） */@media（min-width：1200px）{.tab-h2 {font-size：30px; } .tab-p {font-size：18px; }}次に、ホームページコンテンツの紹介の後半を作成しましょう。
1つ。ホームページのコンテンツはじめに
最初に下部にあるフッターを完成させます
<フッターID = "フッター"> <div> <p>コーポレートトレーニング|協力が問題|著作権の苦情</p> <p> su ICP No. 12345678。©2009-2016 Piaocheng Enterprise Training Network。ブートストラップを搭載しています。 </p> </div> </footer>
ボトムCSS
#footer {padding：20px;テキストアライグ：センター;バックグラウンドカラー：#eee;ボーダートップ：1PX SOLID #CCC;} // 2つの段落のコンテンツ<div> <div> <div> <div> <img src = "img/tab2.png"> </div> <div> <h3>強力な学習システム</h3> <p>管理マスターによる検査層を通じて、あなたのビジネスは大きな進歩を遂げます。 </p> </div> </div> </div> </div> </div> <div> <div> <div> <img src = "img/tab3.png"> </div> <div> <h3>完璧な管理方法</h3> <p>最新の管理トレーニングプログラムにより、ビジネスはおしゃべりに追いつくことができます。 </p> </div> </div> </div> </div>
CSSセクション
.tab2 {background：#eee;パディング：60px 20px;テキストアリグイン：center;}。tab2 img {width：40％;高さ：40％;}。tab3 {padding：40px 0;テキストアライグ：center;}。tab3 img {width：65％;高さ：65％;}。テキストh3 {font-size：20px;}。テキストp {font-size：14px;}/ *小さな画面（タブレット、768px以上） */@@@@@width：768px）{.text h3 {font-size：22px; } .text p {font-size：15px; } .tab2-text {float：left; } .tab2-img {float：右; }}/ *中画面（デスクトップディスプレイ、992px以上） */@media（min-width：992px）{.text h3 {font-size：24px; } .text p {font-size：16px; } .tab2-text {float：left; } .tab2-img {float：右; }}/ *大画面（大型デスクトップモニター、1200px以上） */@media（min-width：1200px）{.text h2 {font-size：26px; } .text p {font-size：18px; } .tab2-text {float：left; } .tab2-img {float：右; }}JS制御垂直センタリング
$（ '。テキスト'）。eq（0）.css（ 'margin-top'、（$（ '。auto'）。eq（0）.height（） - $（ '。テキスト'）。 （$（ '。自動'）。eq（0）.height（） - $（ '。テキスト'）。eq（0）.height（）） / 2 + 'px'）;}）; $（ '。テキスト'）。 $（ '。テキスト'）。eq（1）.height（）） / 2 + 'px'）; $（windo）.resize（function（）{$（ '。テキスト'）。 'px'）;}）;それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記は、ブートストラップホームページに導入されたすべてのコンテンツです。気に入っていただければ幸いです。将来、よりエキサイティングなコンテンツプレゼンテーションがあります。お見逃しなく。