Sections

すべてのセクションは HTML の観点から同様の外部構造を持ち、次のようになります 👇

<!-- The section -->
<section class="section">
    <!-- A container (optional) -->
    <!-- Use .container-sm or .container-xs to make it smaller, see helper classes -->
    <div class="container">
 
        <!-- Inner section wrapper -->
        <div class="section-inner">
 
            <!-- Section content -->
 
        </div>
    </div>
</section>

この基本構造は、カスタム コンテンツを含む汎用セクションが必要な場合に使用できます。

React と Vue では、/src/components/sections/ フォルダー (GenericSection.js / GenericSection.vue という名前です) に汎用セクション コンポーネントを作成でき、この方法でインポート/使用できます 👇

<c-generic-section>
<!-- Section content -->
</c-generic-section>

通常、次の章で説明するように、既製のセクションはすべて同じ構造を尊重しており、特異性の理由から 2 つの追加クラスが含まれています。 たとえば、ヒーローセクションは次のように機能します 👇

<section class="hero section"><!-- We've added a .hero class -->
    <div class="container">
        <div class="hero-inner section-inner"><!-- We've added a .hero-inner class -->
        
            <!-- Hero section content -->
        
        </div>
    </div>
</section>

したがって、独自のカスタム セクションを追加する場合は、このアプローチに従うことを強くお勧めします。

Top and bottom borders(上下の境界線)

.has-top-divider / .has-bottom-divider ヘルパー クラスを使用して、セクションの上部または下部に行区切りを表示できます。

<!-- Section with a top divider matching the container width -->
<section class="section">
    <div class="container">
        <div class="section-inner has-top-divider">
 
            <!-- Section content -->
 
        </div>
    </div>
</section>

React と Vue で 👇

<c-generic-section top-divider>
<!-- Section content -->
</c-generic-section>

全幅の仕切りの場合は、.has-top-divider クラスまたは .has-bottom-divider クラスを外側の <section> 要素に追加します 👇

<!-- Section with full-width dividers -->
<section class="section has-top-divider has-bottom-divider">
    <div class="container">
        <div class="section-inner">
 
            <!-- Section content -->
 
        </div>
    </div>
</section>

React と Vue で次の props を使用します 👇

<c-generic-section top-outer-divider bottom-outer-divider>
<!-- Section content -->
</c-generic-section>

Invert colors(色反転)

ヘルパー .has-bg-color クラスと .invert-color クラスを使用して、セクションの背景とテキストの色をすばやく反転できます。 白と暗い背景を反転する例を次に示します。

<section class="section has-bg-color invert-color">
    <div class="container">
        <div class="section-inner">
 
            <!-- Section content -->
 
        </div>
    </div>
</section>

React または Vue には次の props を使用してください 👇

<c-generic-section has-bg-color invert-color>
<!-- Section content -->
</c-generic-section>

Section header

セクションの先頭にタイトルや短い段落を表示したい場合は、セクションヘッダーの章を参照してください。

属性一覧

すべてのセクションで共有される属性の完全なリストは次のとおりです。 これらの props は別のファイル (src/utils/SectionProps.js) に保存されており、セクション コンポーネントにインポートする必要があります。 混乱した場合は、汎用セクション コンポーネント (GenericSection.js / GenericSection.vue) を見てください 👇

<script>
import { SectionProps } from '@/utils/SectionProps.js'
export default {
mixins: [SectionProps]
}
</script>

React 属性

Vue 属性