この記事では、参照のためにBootstrap3レスポンシブWebサイト開発コードを共有しています。特定のコンテンツは次のとおりです
Bootstrap3を初めて使用し、モバイルを非常にサポートしており、モバイルとPCをサポートするWebサイトを迅速に開発できることがわかりました。
以下は、この記事の例、特定のコードです。
タイムラインは外国のウェブサイトからのものであり、使用されるCSSは次のとおりです
.timeline {list-style：none;パディング：20px 0 20px;位置：相対;}。タイムライン：{top：0;下：0;位置：絶対;コンテンツ： " ";幅：3px;バックグラウンドカラー：#eeeeee;左：50％;マージン左：-1.5px;}。タイムライン> li {マージンボトム：20px;位置：相対;}。タイムライン> li：前、.timeline> li：後{content： "";ディスプレイ：テーブル;}。タイムライン> li：after {clear：blote;}。タイムライン> li：before、.timeline> li：after {content： "";表示：表;}。タイムライン> li：{clear：blote;}。タイムライン> li> .timeline-panel {width：46％;フロート：左;ボーダー：1pxソリッド＃D4D4D4;ボーダーラジウス：2px;パディング：20px;位置：相対; -webkit-box-shadow：0 1px 6px rgba（0、0、0、0.175）; Box-Shadow：0 1PX 6PX RGBA（0、0、0、0.175）; } .timeline> li> .timeline-panel：{position：absolute;トップ：26px;右：-15px;ディスプレイ：インラインブロック。ボーダートップ：15px固体透明。国境左：15pxソリッド#ccc;国境右：0ソリッド#CCC;国境圏：15px固体透明。コンテンツ： " "; } .timeline> li> .timeline-panel：after {position：absolute;トップ：27px;右：-14px;ディスプレイ：インラインブロック。ボーダートップ：14px固体透明。国境左：14px Solid #fff;国境右：0ソリッド#fff;国境圏：14px固体透明。コンテンツ： "";}。タイムライン> li> .timeline-badge {color：#fff;幅：50px;高さ：50px;ラインハイト：50px;フォントサイズ：1.4em;テキストアライグ：センター;位置：絶対;トップ：16px;左：50％;マージン左：-25px;バックグラウンドカラー：＃999999; z-index：100; Border-Top-Right-Radius：50％; Border-Top-Left-Radius：50％;国境領 - 右 - radius：50％;国境圏の左 - radius：50％; Border-Bottom-Left-Radius：50％;}。Timeline> li.Timeline Inverted> .Timeline-Panel {float：right;}。境界線幅：15px;左：-15px;右：auto;}。タイムライン> li.timeline inverted> .timeline-panel：後{border-left-width：0;境界線幅：14px;左：-14px;右：Auto;}。Timeline-Badge.primary {background-color：＃2e6da4！falight;}。 ＃d9534f！fality;}。timeline-badge.info {background-color：＃5bc0de！fality;}。色：継承;}。タイムラインボディ> p、.timeline-body> ul {margin-bottom：0;}。タイムラインボディ> p + p {margin-top：5px;}@media（max-width：767px）{ul.timeline：前{左：40px; } ul.timeline> li> .timeline -panel {width：calc（100％-90px）;幅：-moz -calc（100％-90px）;幅：-webkit -calc（100％-90px）; } ul.timeline> li> .timeline-badge {左：15px;マージン左：0;トップ：16px; } ul.timeline> li> .timeline-panel {float：right; } ul.timeline> li> .timeline-panel：before {border-left-width：0;境界線幅：15px;左：-15px;右：自動; } ul.timeline> li> .timeline-panel：after {border-left-width：0;境界線幅：14px;左：-14px;右：自動; }} <ul> <li> <div> <i> </i> </div> <div> <h4> anthony Robin・intulident </h4> <p> <small> <i> </i> </small> </p> </div> <div> <p>彼は、本格的なキャリアから成功した億万長者であり、最も成功した潜在的な開発専門家です。彼は、プロのチーム、企業大統領、国家元首を支援して、可能性を刺激し、さまざまな困難と最低を克服します。彼は多くの王室の家族にカウンセリングを行い、元米国大統領クリントンとダイアナ王女によって個人コンサルタントとして雇われました。彼は、南アフリカのマンラ大統領、元ソビエト大統領ゴルバチョフ、世界テニスチャンピオンのアンドレ・アガシなど、多くの世界の有名人に助言しています。 </p> </div> </li> <li> .................................... </li> </ul>その過程で、Android 4.0、width：-webkit -calc（100％-90px）でそれを発見しました。サポートはあまり良くなく、タイムラインディスプレイは正常ではありませんでした。その後、JSで解決されました。
$（function（）{$（window）.resize（function（）{inittimepanelsize（）;}）; inittimepanelsize（）; function inittimepanelsize（）{width = $（this）.width（）; // alert（width）; if（width <= 767）{ $（ 'div.timeline-panel'）。width（this）.width（）-90）;複製画像：
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記は、Bootstrap3 Responsive Webサイトの重要な制作コードです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。