テーブル行データの動的サムネイル
ゼンディー
下の写真のように、テーブルの行からロゴの動的なサムネイルを作成する方法を考えていましたか？
私は以下のコードを使用しています：
.numberCircle {
border-radius: 50%;
width: 30px;
height: 30px;
padding: 8px;
background: #ddd;
border: 2px solid #666;
color: white;
text-align: center;
font: 16px Arial, sans-serif;
}<?php
$words = preg_split("/\s+/", "Unnamed Template",2);
foreach ($words as $w) {
$acronym .= $w[0];
}
?>
<div class="numberCircle">
<?php echo $acronym;?>
</div>私はWeb開発にPHP、HTML、およびBootstrapを使用しています。このようにするためのパッケージ/ツールはありますか？
ありがとう。
Untara Vivi Chahya
代わりにJSとjQueryを使用できます。jQuerylibを追加することを忘れないでください。
<div class="numberCircle"></div>
<p class="content">Lorem Ipsum Dormitor</p>
<script>
var text = $('.content').text().split(" ");
var cap = [];
for (let i = 0; i < 2; i++) {
var getCap = text[i].charAt(0);
cap.push(getCap)
}
$('.numberCircle').text(cap[0] + cap[1])
</script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
MERN-Reactデータテーブルコンポーネントのアイテム/行を削除します
- 2
テーブルデータベースからの動的ランダム行
- 3
Microsoft BotFrameworkサムネイルカードのサブタイトルに新しい行を挿入する方法
- 4
wiaアイテムのプロパティ「サムネイルデータ」を.net画像に変換します
- 5
カスタムXibからのテーブルビューの動的セルサイズ
- 6
デュアルブートシステムでの移動パーティションのサイズ変更
- 7
Firebase-動的データベースパスへのクラウド機能サムネイルストア
- 8
テーブル行のJQuery動的バインディング
- 9
動的テーブルから次のデータ行を ReactJS のダイアログにプルする
- 10
反応ネイティブのfirebaseリアルタイムデータベースを使用したsetState
- 11
データなしのOracleテーブルサイズ
- 12
ネイティブノードモジュールを使用したフォームデータの送信
- 13
MoreViewControllerテーブルのタブバーアイテムを動的に更新する
- 14
テーブルタイプの動的作成
- 15
データテーブルのサブセット化/行のカウント
- 16
多くの（100以上のアイテム）テーブルの静的テーブルと動的プロトタイプ
- 17
データテーブルの特定の行選択の特定の列に基づいてデータフレームをサブセット化します
- 18
HTMLソート可能テーブルの行データを動的に非表示/表示
- 19
ウェブサイトのテーブル行を繰り返し処理してデータを取得する
- 20
データテーブル行にボタンを動的に追加
- 21
jsonデータの行を既存のテーブルに動的に挿入する
- 22
プライムフェイスでデータテーブルの行の高さを下げる方法
- 23
列データと他のテーブルのデータを組み合わせたサーバーサイドデータテーブル
- 24
テーブル行からのスクレイピープルデータ
- 25
グーグルクロームでビデオのネイティブ再生ボタンを非表示
- 26
1つのアイテムとして2行を使用してDropdowlistにVB.Netデータテーブル
- 27
WordpressのBootstrapカルーセルサムネイルでアイテムのアクティブ部分とデータソース部分を解決するにはどうすればよいですか？
- 28
データテーブルのネストされた（関連する）行
- 29
メタデータを表示-画像ボックスにJpegのサムネイル
コメントを追加