<!DOCTYPE html>
<html>
<head>
<title>書籍登録画面</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>書籍の登録フォーム</h2>
<form>
<div class="form-group">
<label for="bookTitle">書籍のタイトル</label>
<input type="text" class="form-control" id="bookTitle" placeholder="タイトルを入力">
</div>
<div class="form-group">
<label for="publisher">出版社</label>
<input type="text" class="form-control" id="publisher" placeholder="出版社を入力">
</div>
<div class="form-group">
<label for="category">カテゴリ</label>
<select class="form-control" id="category">
<option value="">カテゴリを選択</option>
<option value="fiction">フィクション</option>
<option value="nonfiction">ノンフィクション</option>
</select>
</div>
<div class="form-group">
<label for="registrationDate">登録日</label>
<input type="date" class="form-control" id="registrationDate">
</div>
<div class="form-group">
<label for="note">備考</label>
<textarea class="form-control" id="note" placeholder="備考を入力"></textarea>
</div>
<button type="button" class="btn btn-default">キャンセル</button>
<button type="submit" class="btn btn-primary">登録</button>
</form>
</div>
</body>
</html>
このHTMLでブラウザに表示すると、各入力欄と登録、キャンセルボタンが表示される書籍登録フォームが作成されます。書籍のタイトル、出版社、登録日、備考はテキストを直接入力できます。カテゴリは、プルダウンメニューから選択できます。選択項目は現在、フィクションとノンフィクションの2つに設定されていますが、必要に応じて変更や追加が可能です。
<!DOCTYPE html>
<html>
<head>
<title>書籍一覧画面</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>書籍一覧</h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col"><input type="text" class="form-control" placeholder="書名フィルター"></th>
<th scope="col"><input type="text" class="form-control" placeholder="著者名フィルター"></th>
<th scope="col"><input type="text" class="form-control" placeholder="出版社フィルター"></th>
<th scope="col"><input type="text" class="form-control" placeholder="カテゴリフィルター"></th>
<th scope="col"><input type="text" class="form-control" placeholder="発売日フィルター"></th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- 各行データはサーバーサイドから取得 -->
<tr>
<td>書名1</td>
<td>著者名1</td>
<td>出版社1</td>
<td>カテゴリ1</td>
<td>発売日1</td>
<td>
<button class="btn btn-primary">編集</button>
<button class="btn btn-danger">削除</button>
</td>
</tr>
</tbody>
</table>
<!-- ページネーション -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<!-- 項目はサーバーサイドから取得 -->
<li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>
</nav>
<!-- 登録ボタン -->
<div class="d-flex justify-content-end">
<button class="btn btn-success">登録</button>
</div>
</div>
</body>
</html>
このサンプルコードでは、テーブルの各列にテキストフィルターを描画し、各行に編集と削除のためのボタンを配置しています。また、テーブルの下部ではページネーション部品も配置しています。最後に登録ボタンも配置しました。実際の実装においては、JavaScriptやバックエンドの処理を組み合わせ、フィルター機能やページネーション、編集・削除機能、新規登録機能などを実現できるようにすることになると思います。
<!DOCTYPE html>
<html>
<head>
<title>画像選択画面</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">画像選択</h2>
<!-- Image Carousel -->
<div id="imageCarousel" class="carousel slide" data-interval="false">
<!-- List of slides -->
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="path_to_image1.jpg" class="d-block w-100" alt="Image 1">
<div class="carousel-caption d-none d-md-block">
<p><strong>キャプション1</strong></p>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<img src="path_to_image2.jpg" class="d-block w-100" alt="Image 2">
<div class="carousel-caption d-none d-md-block">
<p><strong>キャプション2</strong></p>
</div>
</div>
</div>
</div>
<!-- Decide Button -->
<button class="btn btn-primary mt-4">決定</button>
</div>
</body>
</html>