この記事では、リファレンスの最初のブートストラップページの実装コードを共有しています。特定のコンテンツは次のとおりです
複製画像:
実装コード:
<!doctype html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width、device-width = 1" /> <! - 適切な図面とタッチスクリーンのスケーリングを確保するために、ビューポートメタデータタグを<ヘッドに追加する必要があります>。 - > <title> </title> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <script型= "text/javascript" src = "js/jquery-1.9.1.min.js"> </script> <script src = "js/bootstrap.min.js"> 110px 0px 110px;マージンボトム:0px; } .masthead:after {content: '';表示:ブロック;位置:絶対;上:0;右:0;下:0;左:0;背景:URL(IMG/BG1.PNG)繰り返しセンターセンター。不透明:0.4; } .masthead h1 {font-weight:700;フォントサイズ:700%; } .active {font-size:120%; font-weight:bold;} .masthead-a {opacity:0.5;色:白;フォントサイズ:中; } .masthead-a:hover {color:white;不透明:1; } .modal-header li i {Opacity:0.5;} .text-align {display:inline; } .Img-ls {width:23%;境界線:1pxソリッドHSL(0、0%、87%);マージン右:2%;パディング:4px 0px;マージンボトム:6%; Min-Height:350px; Max-Height:600px;フロート:左; } .IMG-LS IMG {width:97%;高さ:自動; } .IMG-ls IMG:Hover {cursor:pointer; } .footer {padding:50px 50px; } .navbar-nav li {display:inline;} </style> </head> <body> <div> <div> < <span> </span> </button> <ul> <li> <a href = "#"> bootstrap中国のウェブサイト</a> </li> </ul> <div role = "navigation"> <ul> <li> <a href = "> boottrap2中国文書< <li> <a href = "#"> bootstrap 4.0プレビュー</a> </li> <li> <a href = "#">チュートリアル</a> </li> <li> <a href = "#"> jquery api </a> </</li> <li> <a href = " href = "#">フロントエンドの高塩分位置</a> </li> <li> <a href = "#"> arbout </a> </li> </div> </div> </div> <div> <div> <h1> bootstrap </h1>> <h2>官能的で強力なフロント開発フレームは、Web開発ファーラーを簡単にします。 </h2> <p> <a href = "#"> bootstrap3中国文書(v3.3.5)</a> </p> <p> <a href = "#"> bootstrap2中国文書(v2.3.2)</a> </p> </div> </div> <div> <ul <li> <li> boottrap technology groug <i> | </i> </li> <li>ブートストラップQ&Aコミュニティ<i> | </i> </li> <li> sina weibo: @bootstrap中国ネットワーク</li> </ul> </div> <div> <div> <div> div> <h2> boottrap関連プロジェクトのどちらかのプロジェクトに基づいている</h2> bootstrap </p> </div> <div> <img src = "img/codeguide.png"/> <h3> <a href = "javascript:void(0)"> bootstrapエンコード仕様<br/> <small> @mdo </small> </a> </h3> <p> <p> <p> <p>高品質のHTMLおよびCSSコード。 </p> </div> <div> <img src = "img/jqueryapi.png"/> <h3> <a href = "javascript:void(0)"> jquery api <br/> <small>中国のマニュアル</small> </a> </a> </h3> <p> jquery api api api api spiness fired restrated frut jquery。 </p> </div> <div> <img src = "img/w3schools.png"/> <h3> <a href = "javascript:void(0)"> w3schools <br/> <small>元の国内ミラー</small> </a> </h3>それと、国内の中国の翻訳バージョンは非常に古くなっています。したがって、私は鏡像を作り、英語の良い学生が元のチュートリアルを直接読むことができることを願っています! </p> </div> <div> <img src = "img/expo.png"/> <h3> <a href = "javascript:void(0)">優れたサイト選択<br/> <small> bootstrapウェブサイト例</p> </div> </div> </div> <footer> <div> <img src = "img/logo.png"/> <h5> <p>このウェブサイトにリストされているオープンソースプロジェクトの中国語版は、<a href = "javascript:void(0)"> <small <> <smal <a href = "javascript:void(0)"> <small> cc by 3.0 </small> </a>プロトコル</p> </h5> </div> <div> <div> <h4> bout </h4> <h4> <ul> <li> <a href = "javascript:void(0)"> <small> about Us </small> </a> </li> <li> <a href = "javascript:boid(0)"> </small> <li> <a href = "javascript:void(0)"> <small>フレンドリーリンク</small> </a> </li> <li> <a href = "javascript:void(0)"> <small> recrutement </small> </a> </li> </h4> </div> <h4> <> <> </</> </</</</</</< href = "javascript:void(0)"> <small> sina weibo </small> </a> </li> <li> <a href = "javascript:void(0)"> <small> email </small> </a> </li> </ul> </h4> </<h4> <h4> <> </</<> <> <> </ut < href = "javascript:void(0)"> <small> laravel中国人</small> </a> </li> <li> <a href = "javascript:void(0)"> <small> ghost china </small> </a> href = "javascript:void(0)"> <small> ucloud </small> </a> </li> <li> <a href = "javascript:void(0)"> <small> </small> </a> </li> </ul> </h4> href = "javascript:void(0)"> <small> Beijing ICP No. 11008151 </small> </a> <small> |北京公安ネットワークセキュリティ11010802014853 </small> </h4> </footer> </body> </html>誰もがまだ満足してはならないと思います。以下の記事をいくつか共有しましょう。
「共有とコレクションに値するブートストラップ学習チュートリアル」「ブートストラップ学習チュートリアル」
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。