본문 바로가기
html, css, bootstrap

0927_bootstrap 사용방법(CDN)

by 신방동불주먹 2022. 9. 27.

 

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

 

 

참고 :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

관련글

티스토리툴바