1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Boostrap3 Motal をBoostrap5 Motalにリファクタリング

Last updated at Posted at 2024-10-28

Boost3 Motal をBoost5 Motalにリファクタリングする時に
いくつかの注意点があります

  • 1.Boost5 MDN リンクを使って、Boost3 の Mdnリンクを置き換える
  <!-- <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  • 2.いくつかの属性名前の変更
data-toggleを data-bs-toggleに変更する
data-targetをdata-bs-targetに変更する
closeをbtn-closeに変更する
data-targetをdata-bs-targetに変更する
data-dismissをdata-bs-dismissに変更する
btn-defaultをbtn-secondary
form-groupをrowに変更する 
control-labelをcolに変更する 

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Bootstrap</title>
  <!-- <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>


</head>
<body>
  <div class="container d-flex  flex-column justify-content-center align-items-center">
<h2>Book Managerment System</h2>
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">Add</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h5 class="modal-title text-center w-100 " id="myModalLabel" >Add New Book</h5>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form">
                    <div class="row mb-4">
                      <label for="BookName" class="col-sm-2 control-label" id = 'name'>Name</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" id="BookName">
                      </div>
                    </div>
                    <div class="row mb-4">
                    <label for="BookAuthor" class="col-sm-2 control-label" id = 'author'>Author</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="BookAuthor" >
                    </div>
                    </div>
                    <div class="row mb-4">
                        <label for="Bookpublisher" class="col-sm-2 control-label" id = 'publisher'>Publisher</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="Bookpublisher" >
                        </div>
                    </div>
                </form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
				</button>
				<button type="button" class="btn btn-primary " id = 'submitBtn'>
					Submit
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
<script src="./js/BookManagerment.js"></script>
</html>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?