WEB/Bootstrap (6) 썸네일형 리스트형 [Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기-2. 목표 여러 페이지를 만들고, 반응형 내비게이션을 사용한다. 포스트 페이지를 동적으로 만들고 페이지를 수정한다. 참조할 templatehttps://startbootstrap.com/theme/clean-blog Clean Blog - Bootstrap Blog Theme - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com 1. flask을 이용해서 잘 연결하기 이것은 지난 포스팅을 참고하자 2022.05.27 - [WEB/Bootstrap] - [Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기 [Web][.. [Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기 오늘의 목표 flask에 다운받을 리소스들을 잘 연결해보자 오늘의 도구 bootstrap/flask/startbootstrap 참조할 멋있는 template : https://startbootstrap.com/theme/grayscale [Grayscale - Free One Page Bootstrap Theme - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com](https://startbootstrap.com/theme/grayscale) 1. flask 서버를 이용하기 위해서 파이썬 파일을 하나 먼저 만든다. from flask import Flask app.. [Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 4.Carousel 캐러셀/ 카드 캐러쉘이란 콘텐츠의 슬라이드쇼와 비슷하다. 다음 컨테츠로 넘어가는 양식으로 스라이드와 덮어씌우기(fade)가 있다. 카드는 컨테이너의 일종으로 주로 가격표나 게시판처럼 쓴다. 1. 어떤 carousel을 쓰느냐 가장 상위 div으로 css선택자에 id, class, data-bs-ride의 값을 입력한다. id의 값으로 "carouselExample어쩌구" class 의 값으로 "carousel slide" +fade 효과 "carousel-fade"을 공백 다음에 넣어준다. data-bs-ride은 "carousel"이다 2. inner을 꾸려준다. 안에 각 슬라이드쇼 하나마다 넣을 이미지 혹은 문구를 으로 넣어준다. 다음 캐러셀 아이팀으로 넘어가는 지연시간을 변경하려면 data-bs-interval의.. [Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 -3. container와 grid이용하기 Bootstrap grid를 이용해서 컨텐츠 배열을 뷰포트에 따라 반응하도록 만들 수 있다. 1. 1열에 여러행 만들기 1 2 3 4 2. 1행에 여러열 만들기 1 2 3 4 뷰포트에 따른 배치하기 화면의 하나의 셀이 차지하는 공간이 최대 12이라 여기면 col-lg-1~12/col-md-1~12/ col-sm-1~12 으로 나눠서 lg은 pc 화면 md는 패드화면 sm 은 휴대폰 화면일 경우의 뷰포트 크기 설정을 할 수 있다. 예를 들어 가장 첫번째1의 셀이 가로를 모두 차지하고 싶다면 1 와 같이 변경해주면 된다. 이를 이용해서 배치 설정을 다양하게 할 수 있다. 4. container 기본컨테이너는 고정너비 컨테이너이다. 이전 포스팅에서도 grid을 만들 때 container안에 넣어서 저절로 pa.. [Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 2. 내비게이션 만들기 참조 : 공식 홈페이지 https://getbootstrap.kr/docs/5.1/components/navs-tabs/ 내비게이션과 탭 Bootstrap에 포함된 내비게이션 컴포넌트를 어떻게 사용하는지 문서와 예시입니다. getbootstrap.kr 1. 기본 내비게이션 부트 스트랩에서 내비게이션을 만들 수 있는 태그는 뿐만 아니라 으로 만들 수 있다. 홈 소개 문의 연결안함 위와 같은 코드를 보면 내비게이션을 일련의 목록 or 안에 만들어 두었다. : ul의 클래스를 nav로, 하위태그인 : 을 nav-item 클래스로 지정했다. 또 다른 방식으로 을 사용할 수도 있다. .nav 클래스는 display :flex;을 사용하므로 을 사용해도 같은 출력이다. 또한 링크 연결을 안할려면 disabled을 .. [Web][Bootstrap] Bootstrap v5.1(jQuery는 없는) - 1. 다운받거나 불러오기 공식홈페이지 참조 https://getbootstrap.com/docs/5.2/getting-started/introduction/ Get started with Bootstrap Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. getbootstrap.com https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr.. 이전 1 다음
