- Bootstrap에서 제공하는 quick start 참고하여 html 내에 추가
- https://getbootstrap.com/docs/5.2/getting-started/introduction/
참고 :https://bcp0109.tistory.com/348
오류메세지 정리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
<h1>Simple List</h1>
/*추가 내용, 버튼 코드:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="추가 내용" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div> */추가 내용, 버튼 코드:
/*리스트 table 코드:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Done</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td><button class="btn btn-primary" type="submit" id="button2">Done</button></td>
<td><button class="btn btn-primary" type="submit" id="button3">Delete</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
*/리스트 table 코드:
</body>
</html>
//버튼
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
to jade
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
title Bootstrap demo
body
link(href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css', rel='stylesheet', integrity='sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT', crossorigin='anonymous')
script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js', integrity='sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8', crossorigin='anonymous')
script(src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js', integrity='sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3', crossorigin='anonymous')
script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js', integrity='sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz', crossorigin='anonymous')
h1 Simple List
.input-group.mb-3
input.form-control(type='text', placeholder='추가 내용', aria-label="Recipient's username", aria-describedby='button-addon2')
button#button-addon2.btn.btn-outline-secondary(type='button') Button
table.table
thead
tr
th(scope='col') #
th(scope='col') Description
th(scope='col') Done
th(scope='col') Delete
tbody
tr
th(scope='row') 1
td 아침에 일어나서 응가하기
td
button#button2.btn.btn-primary(type='submit') Done
td
button#button3.btn.btn-primary(type='submit') Delete
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
(ajax)
$(".button-addon2").on('click', function(e){
$(document).ready(function(){
$.ajax({
url : "/add",
data : {cotents: request.body.contents},
method : "POST",
dataType: "json",
success: success,
});
---------
.fail(function(xhr, status, errorThrown) {
$("#text").html("오류가 발생했다.<br>")
.append("오류명: " + errorThrown + "<br>")
.append("상태: " + status);
})
----------
$.post("/add",{cotents: request.body.contents}, function(data, status){
$("#content").html(data + status); --jade 파일에 보여줌
});
});
'/list'
res.json(list) -> 어디로 뿌려지지
data 무슨값
$(document).ready(function(){
$.ajax('/list',{success: function (list) { // success callback function
$('p').append(list);
}
});
});
$.post("/list",{cotents: request.body.contents}, function(data, status){
$("#content").html(data + status); --jade 파일에 보여줌
});
};
'html, css, bootstrap' 카테고리의 다른 글
1102_CSS (0) | 2022.11.02 |
---|---|
1031_html (이미지태그, 하이퍼링크) (0) | 2022.10.31 |
1031_html (테이블 태그) (0) | 2022.10.31 |
1031_html 관련 홈페이지 (0) | 2022.10.31 |
1031_html (텍스트, 목록 태그) (0) | 2022.10.31 |