目次
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 の グリッドシステム に合わせて適宜変更します。
参考情報
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 になっている。 -->
<!-- 以下略 -->
以上、閲覧ありがとうございました。
- [ Amazon.co.jp アソシエイト ] JavaScript 関係の本
- https://amzn.to/48EoeGM
