目次

panels-heading

当ページは、 Bootstrap の Components の panels heading をコピー、ペーストで簡単に入力できるようにと作成しました。 panels heading とは、以下のようなスタイルになるボックスの指定のことです。

タイトルが入ります。

コンテンツが入ります。
Components · Bootstrap
http://getbootstrap.com/components/#panels-heading

私の場合、 row > col-md-4 > panel と、 Bootstrap のグリッドシステムに panel を入れ子にして使用することが多いため、 panel を設置するための HTML のコードが結構長くなってしまいます。

panel を設置する時に毎回、 row > col-md-4 から記述していくのは労力を要するので、長い HTML コードをコピー、ペーストで使用できれば効率的と思い、今後のためにも、と作ってみたものの、あまり使用することがないのが現実でした。

HTML のコード :

<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">タイトル</h3>
</div>
<div class="panel-body">
コンテンツ
</div>
</div>
</div>
</div>

目次まで戻る

変換フォーム

プライバシーポリシー

下記フォームの入力内容、実行結果は、当サイト管理人および外部に送信される仕組みで作成していません。ただ、何があるか分からないので、念のため、重要な情報は入力しないほうが良いと思います。

テンプレート 2 行目の class="col-md-4" の部分は Bootstrap の グリッドシステム に合わせて適宜変更します。

目次まで戻る

参考情報

目次まで戻る

あとがき

panels heading のコピー・ペースト元生成フォームは、あまり使用することがなかったものの、副産物といいますか、当ページの変換フォーム作成の中でひとつのノウハウを得られたように思います。それは、 JavaScript で日本語の文字列を検索して置換を行う場合は、現在のウェブページの文字コードと JavaScript ファイルの文字コードを一致させておくということです。

UTF-8 ( HTML の文字コード ) = UTF-8 ( JavaScript ファイル保存時の文字コード )

当ページの charset は UTF-8 になっていますが、 JavaScript ファイル保存時の文字コードが SHIF-JIS の時に、何度実行ボタンを押しても変換されませんでした。

[タイトル] と [コンテンツ] の日本語を検索しようとしていたのですが、ファイルの文字コードの違いで、検索されておらず、置換もされませんでした。

JavaScript ファイル保存時の文字コードを UTF-8 とすることで検索、置換ができました。他にも良い方法があるかもしれませんが、いちおう解決できました。

当ページの HTML ソース :

<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
<meta charset="UTF-8"> <!-- UTF-8 になっている。 -->
<!-- 以下略 -->

以上、閲覧ありがとうございました。

目次まで戻る

コメントを残す

  • わかる範囲でしかお答えできませんが、質問も大歓迎です。
  • * のついた項目は必須になります。
  • お名前が未入力の場合は「匿名」という名前で送信されます。
  • 投稿していただいたコメントは、当ブログ管理者の承認後に表示されます。全体的には、以下の流れになります。
    1. コメントを送信。
    2. このページに自動で戻ってきて何の変化もない状態です。
    3. 都度、管理者承認。
    4. コメントが表示されます。
*
コメント欄では、次の HTML タグと属性を使用することができます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

同じカテゴリの投稿( JavaScript )

前後の投稿