私は今日Bootsapを学び、多くを獲得しました。ここで小さなケースを共有しています。特定の説明はすべてコードにあり、より直感的です。
最初に伝説を見てください
<!doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width =" width、width = 1.0 "> <title> bootstrap tab </title> < href = "css/bootstrap.min.css"> <link rel = "styleSheet" type = "text/css" href = "css/bootstrap-responsive.min.css"> <link rel = "styleSheet" type = "text/css" href = " divのwidth of the width of senter in the center-> <div> <! - Hero-unit Focus View Unit - > <div> <h1> lenovo Holdings </h1> <p> <p> <p> <p> <img/bg2.png "> </p> <p> <a href =" 12グリッド、および各サブDIVは4つのグリッドに設定されています。つまり、2012年12月2日に228px-> <div> <div> <h2>会社トピック</h2> <p>に設定されています。起業家チーム」。 </p> <! - btnボタンスタイル - > <p> <a href = "#">もっと学ぶ»</a> </p> </p> </div> <div> <div> <h1>特別な注意</h1> <p>「コンピューターの販売」から始めることから、それの5つのコアアセットの統合、現実のエステート、消費、現代のサービス、最新の化学物質、および最新の農業農業の間に、新しい化学物質、および最新の農業の間に存在します。 </p> <p> <a href = "#"> more»</a> </p> </div> <div> <h1>私たちの歴史</h1> <p> <img src = "img/bg1.png"> </p> <p> <p> <a href = "#"> mor 2013 </p> </footer> </div> <! - bootstrapのjsファイルの紹介 - > <スクリプトタイプ= "text/javascript" src = "src =" js/jquery.min.js "> </script>" text/javascript "src =" js/boottrap。 src = "js/bootstrap-tab.js"> </script> </body> </html> <! - base.cssファイルの紹介 - >/*フォーカススタイル図*/div.hero-unit、デフォルト、グレーにデフォルト*/背景:url(../ img/bg.png)no-repeat;幅:980px;高さ:443px;位置:相対; /*デフォルトは60px*/パディング:0; /*デフォルトは30px*/マージン:0; Border-Color:gray;} div.hero-unit h1 {/*タイトルを非表示*/display:none;}/*広告は左下隅に表示されます*/div.hero-unit .banner {position:absolute;下:0;左:10px;}/*ボタンは右下隅に表示されます*/div.hero-unit .btn {position:absolute;下:14px;右:20px;}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。