-1

私は最近、Web サイトのユーザー インターフェイスをいくつか作成し始めました。私が現在使用しているものは、Bootstrap と呼ばれるもので、簡単に始められて見栄えがします。しかし、次のように css 要素に依存する jsp コード (コンテンツ) を作成しているため、背後にあるアイデアはあまり効率的ではないようです。

<tr class="row col-m-7">
  <td class="column"> ... 
      <a class="btn btn-xs btn-success"> .. </a>
  </td>
  <td class="column"> ... </td>
</tr>

最近、Bootstrap に新しいバージョン (v3) が導入され、jsp の外観が安定するまで、多くのクラス属性を変更する必要がありました。このようにコンテンツとプレゼンテーション用にコードを別々のレイヤーに保持したいので、コンテンツを失うことなく UI フレームワークを簡単に切り替えることができます。

コンテンツ (単純な html または jstl):

   <tr>
      <td>...
      <td>...
    </tr>

プレゼンテーション：

    .. somehow achieving giving a good look to the table above .. (how ???)

JSP でコンテンツ レイヤーとプレゼンテーション レイヤーを分離するにはどうすればよいですか?

4

1 に答える 1

2

アップデート

Web コンポーネントと呼ばれる新しい標準が開発されています。これにより、開発者は、スタイル設定と内部の html マークアップの実装を隠すカスタム html 要素を作成できます。たとえば、モーダル ウィジェットは次の構文で宣言できます。

<bootstrap-modal>
    <h1>Hello World!</h1>
</bootstrap-modal>

舞台裏では、開発者はウィジェットのレンダリングに使用される実際の html マークアップを指定しており、その実装はカスタム コンポーネントに関連付けられています。

開始するためのいくつかのチュートリアルを次に示します。

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation

http://css-tricks.com/modular-future-web-components/

https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/

すべての<a>要素が同じように見える場合、1 つの css クラスを記述でき、すべての<a>要素が同じスタイルになります。

a {
    color:blue;
}

一部の Web サイトは、何らかの理由で、おそらく属性の値に関係している場合もあります。要素hrefごとに異なる色とスタイルが必要になります。<a>これを実現する唯一の方法はclass、スタイルシートの css クラスを参照する属性を使用することです。

a.red {
    color:red;
}

<a class="red" href="red.html"/>

これは、同じ要素名に対して独自のスタイル設定が必要な場合は、プレゼンテーション要素とスタイル設定をリンクするコードを常に記述する必要があることを意味します。

于 2013-11-13T19:52:03.223 に答える