Bootstrap を使用して、応答性の高い個人用ホームページをすばやく構築します (デモ + ソースコード付き)_html/css

1. はじめに

私たちプログラマーはそれぞれ、他の人とコミュニケーションしたり共有したりするために独自の技術的なブログプラットフォームを構築することに熱心ですが、他の人のブログテンプレートを使用することに創造性はありません。 Web サイトのバックエンドで作業する開発者はフロントエンドについては知っているかもしれませんが、優れたフロントエンドを自分で記述するのは依然として非常に面倒です。幸いなことに、Twitter 発の非常に人気のあるフロントエンドフレームワークである Bootstrap があります。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。バックエンドプログラマの観点からフロントエンドのデザインについて話しましょう（非常にぎこちないですが） Web サイトのカラーマッチングはあまり理想的ではありません。独自の目標を達成するために、CSS スタイルを自分で変更できます。

以下は、Bootstrap を使用して構築したホームページのアドレスです: 共有 gis: http://test.sharegis.cn/ にアクセスしてください (応答性の高いページを体験するには、モバイルとコンピューターの両方で試してください:-D、ホームページだけを作成しました) ）。

早速説明から始めましょう:

2. 実装

(1) 基本的なテンプレートの構築 Bootstrap 中国語 Web サイト http://v3.bootcss.com/getting-started/ を参照してください。始めましょう—> 基本テンプレート

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3   <head> 4       <meta charset="utf-8"> 5       <!--不支持老版本IE--> 6       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7       <!--device-width自适应移动端宽度，initial-scale=1不进行缩放--> 8     <meta name="viewport" content="width=device-width, initial-scale=1"> 9     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->10     <title>Bootstrap 101 Template</title>11     <!-- Bootstrap 核心样式文件 -->12     <link href="CSS/bootstrap.min.css" rel="stylesheet">13   </head>14   <body>15     <h1>你好，世界！</h1>16     <!-- jQuery CDN加速 -->17     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>18     <!--bootstrap核心JS文件 （必须放在在jQuery，以为bootstrap基于必须放在在jQuery） -->19     <script src="js/bootstrap.min.js"></script>20   </body>21 </html>

ログイン後にコピー

(2) ナビゲーションバー Bootstrap の中国語 Web サイトを参照してください。 http://v3.bootcss.com/components/#navbar、コンポーネント -> ナビゲーションバー

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3   <head> 4       <meta charset="utf-8"> 5       <!--不支持老版本IE--> 6       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7       <!--device-width自适应移动端宽度，initial-scale=1不进行缩放--> 8     <meta name="viewport" content="width=device-width, initial-scale=1"> 9     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->10     <title>Bootstrap 101 Template</title>11     <!-- Bootstrap 核心样式文件 -->12     <link href="CSS/bootstrap.min.css" rel="stylesheet">13   </head>14   <body>15     <h1>你好，世界！</h1>16     <!-- jQuery CDN加速 -->17     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>18     <!--bootstrap核心JS文件 （必须放在在jQuery，以为bootstrap基于必须放在在jQuery） -->19     <script src="js/bootstrap.min.js"></script>20   </body>21 </html>

ログイン後にコピー

パノラマ写真:

レスポンシブ画像:

(3)カルーセル Bootstrap 中国語 Web サイト http://v3.bootcss.com/css を参照してください。 /# グリッド Javascript プラグイン —>Carousel

 1 <!--------------------------------------------------轮播开始--------------------------------------------> 2    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 3        <!-- ol指示器  ol标签与ul标签不同 ol为是有序列表 ul为是无序列表 --> 4        <ol class="carousel-indicators"> 5              <!-- 指示器 --> 6            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 7            <li data-target="#carousel-example-generic" data-slide-to="1"></li> 8            <li data-target="#carousel-example-generic" data-slide-to="2"></li> 9            <li data-target="#carousel-example-generic" data-slide-to="3"></li>10        </ol>11 12        <!-- 包装的轮播图片-->13        <div class="carousel-inner" role="listbox">14            <!--图片-->15            <div class="item active">16                <img src="/Images/1.jpg" alt="风景1">17                <div class="carousel-caption">18                    <!--h4中的内容显示到图片上面，-->19                    <h4>真正的才智是刚毅的志向。 —— 拿破仑</h4>20                </div>21            </div>22            <div class="item">23                <img src="/Images/2.jpg" alt="风景2">24                <div class="carousel-caption">25                    <h4>志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4>26                </div>27            </div>28            <div class="item">29                <img src="/Images/3.jpg" alt="风景3">30                <div class="carousel-caption">31                    <h4>志向和热爱是伟大行为的双翼。 —— 歌德</h4>32                </div>33            </div>34            <div class="item">35                <img src="/Images/4.jpg" alt="风景4">36                <div class="carousel-caption">37                    <h4>生活有度，人生添寿。 —— 书摘</h4>38                </div>39            </div>40        </div>41 42        <!-- Controls -->43        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">44            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>45            <span class="sr-only">Previous</span>46        </a>47        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">48            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>49            <span class="sr-only">Next</span>50        </a>51    </div>52    <!--------------------------------------------------轮播结束-------------------------------------------->

ログイン後にコピー

Panorama

(4) コンテンツレイアウト

a を参照してください。ラップ中国語ウェブサイト http://v3 . bootcss.com/css /#grid グローバル CSS スタイル -> グリッドシステム

Bootstrap は、画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割されます。これには、使いやすい事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスインが含まれています。

グリッドシステムの詳細については、ヘルプを参照してください。ここで私の理解を説明します。Bootstrap はページを 12 個の等しい列に分割し、たとえば、次のようにコンテンツを任意の行に配置できます。 4:4 ) も使用できます (4::3:2)。つまり、合計は 12 を超えてはなりません。画面が小さくなると、元の 1 行は 4:4:4 になり、それぞれ 3 行になります。例: パノラマ

レスポンシブダイアグラム

以下では、グリッドシステムを使用してレイアウトページを構築します (画像内の 3 次元モデルのデザインに興味がある場合は、以下を参照してください)思考を発展させるための私のブログ、3 次元モデリングのためのプログラミングのアイデアの使い方 (1))

 1 <!--------------------------------------------------轮播开始--------------------------------------------> 2    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 3        <!-- ol指示器  ol标签与ul标签不同 ol为是有序列表 ul为是无序列表 --> 4        <ol class="carousel-indicators"> 5              <!-- 指示器 --> 6            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 7            <li data-target="#carousel-example-generic" data-slide-to="1"></li> 8            <li data-target="#carousel-example-generic" data-slide-to="2"></li> 9            <li data-target="#carousel-example-generic" data-slide-to="3"></li>10        </ol>11 12        <!-- 包装的轮播图片-->13        <div class="carousel-inner" role="listbox">14            <!--图片-->15            <div class="item active">16                <img src="/Images/1.jpg" alt="风景1">17                <div class="carousel-caption">18                    <!--h4中的内容显示到图片上面，-->19                    <h4>真正的才智是刚毅的志向。 —— 拿破仑</h4>20                </div>21            </div>22            <div class="item">23                <img src="/Images/2.jpg" alt="风景2">24                <div class="carousel-caption">25                    <h4>志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4>26                </div>27            </div>28            <div class="item">29                <img src="/Images/3.jpg" alt="风景3">30                <div class="carousel-caption">31                    <h4>志向和热爱是伟大行为的双翼。 —— 歌德</h4>32                </div>33            </div>34            <div class="item">35                <img src="/Images/4.jpg" alt="风景4">36                <div class="carousel-caption">37                    <h4>生活有度，人生添寿。 —— 书摘</h4>38                </div>39            </div>40        </div>41 42        <!-- Controls -->43        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">44            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>45            <span class="sr-only">Previous</span>46        </a>47        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">48            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>49            <span class="sr-only">Next</span>50        </a>51    </div>52    <!--------------------------------------------------轮播结束-------------------------------------------->

ログイン後にコピー

(5) タブページ Bootstrap 中国語 Web サイト http://v3 を参照してください。 bootcss.com/css/#grid Javascript プラグイン—> タブページ

 1 <!-------------------------标签页开始-----------------------------> 2           <div> 3               <div class="row"> 4                   <h2>技术分类</h2> 5               </div> 6               <!-- Nav tabs页签 --> 7               <ul class="nav nav-tabs" role="tablist"> 8                   <!--注意这里的#home与下面的div role="tabpanel" class="tab-pane active" id="home" 的id对应实现页签--> 9                   <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">GIS基础</a></li>10                   <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">.NET基础</a></li>11                   <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Asp.net MVC</a></li>12                   <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Web GIS</a></li>13               </ul>14 15               <!-- Tab panes -->16               <div class="tab-content">17                   <!--active当前选中项-->18                   <div role="tabpanel" class="tab-pane active" id="home">19                       <div class="row">20                           <div class="col-sm-8">21                               <h3>GIS基础介绍</h3>22                               <p style="font-size:14px">地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下，23                                   对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。</p>24                               <p>位置与地理信息既是LBS的核心，也是LBS的基础。一个单纯的经纬度坐标只有置于特定的地理信息中，代表为某个地点、标志、方位后，才会被用户认识和理解。用户在通过相关技25                                   术获取到位置信息之后，还需要了解所处的地理环境，查询和分析环境信息，从而为用户活动提供信息支持与服务。</p>26                               <p><a href="#" class="btn btn-success" role="button">详细了解</a></p>27                           </div>28                           <div class="col-sm-4">29                               <img src="/Images/gis.jpg" class="img-thumbnail" alt="GIS基础"/>30                           </div>31                       </div>32                   </div>33                   <div role="tabpanel" class="tab-pane" id="profile">34                       <div class="row">35                           <div class="col-sm-8">36                               <h3>.Net基础介绍</h3>37                               <p style="font-size:14px">.NET是 Microsoft XML Web services 平台。XML Web services 允许应用程序通过 Internet 进行通讯和共享数据，而不管所采用的是哪种操作38                                   系统、设备或编程语言。Microsoft .NET 平台提供创建 XML Web services 并将这些服务集成在一起之所需。对个人用户的好处是无缝的、吸引人的体验。</p>39                               <p><a href="#" class="btn btn-success" role="button">详细了解</a></p>40                           </div>41                           <div class="col-sm-4">42                               <img src="/Images/.Net.jpg" class="img-thumbnail" alt=".net"/>43                           </div>44                       </div>45                   </div>46                   <div role="tabpanel" class="tab-pane" id="messages">47                       <div class="row">48                           <div class="col-sm-8">49                               <h3>Asp .net MVC介绍</h3>50                               <p style="font-size:14px">ASP.NET MVC 4已经正式发布，并内置于Visual Studio 2012，51                                   新版本ASP.NET MVC版本新增了手机模版、单页应用程序，Web API等模版，更新了一些 javascript 库，其中示例页面也使用了jquery的AJAX登录，52                                   并增加了OAuth认证/Entity Framework5的支持。同时也增强了对HTML5、AsyncController等的支持。</p>53                               <p><a href="#" class="btn btn-success" role="button">详细了解</a></p>54                           </div>55                           <div class="col-sm-4">56                               <img src="/Images/MVC.jpg" class="img-thumbnail" alt="MVC"/>57                           </div>58                       </div>59                   </div>60                   <div role="tabpanel" class="tab-pane" id="settings">61                       <div class="row">62                           <div class="col-sm-8">63                               <h3>Web GIS基础介绍</h3>64                               <p style="font-size:14px">Web GIS是Internet技术应用于GIS开发的产物，是现代GIS技术的重要组成部分。常见的Web GIS开发软件有超擎图形。65                                   是一个交互式的、分布式的、动态的地理信息系统，是由多个主机、多个数据库的无线终端，并由客户机与服务器（HTTP服务器及应用服务器）相连所组成的。66                                   GIS通过WWW功能得以扩展，真正成为一种大众使用的工具。67                                   从WWW的任意一个节点，Internet用户可以浏览WebGIS站点中的空间数据、制作专题图，以及进行各种空间检索和空间分析，从而使GIS进入千家万户。</p>68                               <p><a href="#" class="btn btn-success" role="button">详细了解</a></p>69                           </div>70                           <div class="col-sm-4">71                               <img src="/Images/webgis.jpg" class="img-thumbnail" alt="GIS基础"/>72                           </div>73                       </div>74                   </div>75               </div>76 77           </div>78           <!-------------------------标签页结束----------------------------->

ログイン後にコピー

(6)著作権情報

1 <div  id="copyright">2            <p style="margin-top:10px">2016@共享gis  All Rights Reserved. </p>3            <p> 工信部备案号： 晋ICP备16002450号-1 </p>4             <p> 联系方式：qq:1300776935    邮箱：hhy@sharegis.cn </p>5        </div>

ログイン後にコピー

3 展望

今日は個人 Web サイト用のレスポンシブホームページを作成しました。後で、Asp.net MVC+Bootstrap などを使用して独自のテクノロジ共有 Web サイトを構築します。 Webサイトを構築する過程をブログ形式で記録し、ソースコードを皆さんと共有していきます。皆さん、私をフォローして一緒に進歩してください...

このソースコードのアドレス: Share GIS