Ruxin

アプリランディングページHTMLテンプレート

作成日: 06/08/2020
作成者: layerdrops
メール: [email protected]

ご購入いただきありがとうございます Ruxin - アプリランディングページHTMLテンプレート。このヘルプファイルの範囲を超えるご質問がございましたら、ユーザーページのお問い合わせフォームからメールをいただくか、サポートセンターにチケットを送信してください。
本当にありがとうございます!


テンプレートの機能


  • クリーンでシンプルなデザイン
  • 最新のBootstrap 4フレームワーク
  • HTML5 & CSS3
  • CSS3アニメーション
  • 完全レスポンシブデザイン
  • すべてのファイルに適切なコメント付き
  • IE10+、Firefox、Safari、Opera、Chromeに対応したクロスブラウザ互換
  • 詳細なドキュメント

HTML構造


このHTMLテンプレートは最新の Bootstrap v4.5 有効なHTML5タグを使用しています。このテーマは4カラム対応のレスポンシブレイアウトです。コンテンツエリアのすべての情報はクラス内にネストされ、定義済みのクラスが付属しています。

基本グリッドHTML

シンプルな2カラムレイアウトの場合、.containerを作成し、適切な数の.col-md*カラムを追加します。

この例では、.col-md-4と.col-md-8を使用して、合計12カラムで完全な行を構成しています。


...
...

カラムのネスト

デフォルトのグリッドでコンテンツをネストするには、新しい.containerと一連の.col-md*カラムを既存の.col-md*カラム内に追加します。ネストされた行には、親のカラム数と同じ合計になるようにカラムを設定する必要があります。


レベル1カラム
レベル2
レベル2
レベル2カラム

CSSファイルと構造


このテーマでは主に3つのメインCSSファイルが使用されています。1つ目は bootstrap.css, 2つ目は style.css (このテンプレート用)、3つ目は responsive.css (レスポンシブレイアウト制御用)です。

サイトの特定のセクションを編集したい場合は、CSSファイル内の該当するラベルを見つけ、編集が必要なスタイルまでスクロールダウンしてください。


これらは、style.cssファイルの上部に「インポートCSS」としてラベル付けされて読み込まれるCSSファイルです。 インポートCSS.


@import url(bootstrap.min.css);
@import url(fontawesome.min.css);
@import url(flaticon.css);
@import url(default.css);
@import url(animate.css);
@import url(swiper-bundle.min.css);
@import url(style.css);
                

フォント

デフォルトでは、このテンプレートはGoogle Web Fontサービスからフォントを読み込みます。お好みのフォントに変更できます。


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
                

jQueryとJavaScript


このテーマは3種類のJavaScriptファイルを読み込みます。

  • jQuery
  • カスタムスクリプト (main.js)
  • 一部のプラグイン

  • jQuery は、記述するコード量を大幅に削減するJavaScriptライブラリです。
  • このサイトのアニメーションのほとんどは、カスタムスクリプトから実行されます。確認すべきいくつかの機能があります。

カスタムスクリプトに加えて、エフェクトを作成するためにいくつかの「実績ある」プラグインを実装しています。このプラグインはパッケージ化されているため、ファイル内を手動で編集する必要はありません。知っておくべき唯一のことは、メソッドの呼び出し方です。



これらは、ボディセクションの最後にテンプレートに読み込まれるJSファイルです。


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
                

チュートリアル


ロゴ


テンプレートの更新を始めましょう。index.htmlファイルを開き、手順に従ってください。

ほとんどの更新はすべてのページで同じです。そのため、ここで一度説明します。



    乐鱼官网

                

「images/logo.png」を、ロゴ画像のURLソースまたはウェブサイト名に置き換えてください。


ナビメニュー


これが基本構造です。


そのul liアイテムに独自のメニューアイテムを追加してください。ドロップダウンメニューを追加したい場合は、「サブメニュー」クラスを持つul liをネストしてください。 サブメニュー



フッター著作権





                

「© Copyright Ruxin 2020 . All right reserved.」を著作権情報に置き換えてください。

ソースとクレジット


テンプレートで使用されているフォントはGoogleフォントです。Google Fonts APIで見つけることができます。

使用されているフォント:

Montserrat


アニメーション効果に使用されるファイル:

animate.css (cssフォルダ内)


使用されているスライダー:

swiperスライダー


使用されているプラグイン:

wow.min.js (pluginsフォルダにあります)

scrolling-nav.js (pluginsフォルダにあります)

すべてのコードは編集しやすいように適切にコメントされています。

サポート


改めて、このテーマをご購入いただき誠にありがとうございます。最初にお伝えしたように、このテーマに関するご質問があれば喜んでお手伝いいたします。保証はできませんが、最善を尽くしてサポートいたします。ご質問がございましたら、サポートセンターまでお気軽にお問い合わせください。

メールアドレス: [email protected]

豫ICP备2024386513号
乐鱼官网科技有限公司電話番号:+86 139 2801 4409メールアドレス:[email protected]WeChat:ileyuapp_978