Bootstrap 페이지 레이아웃 사용 배우 기
Bootstrap 은 트 위 터(세계 최대 웨 이 보)의 기술 엔지니어 두 명 이 개발 한 HTML,CSS,JavaScript 기반 의 오픈 소스 프레임 워 크 입 니 다.이 프레임 워 크 코드 는 간결 하고 시각 적 으로 아름 다 우 며 PC 와 모 바 일 장 치 를 바탕 으로 하 는 웹 페이지 수 요 를 신속 하고 간단하게 구축 할 수 있 습 니 다.
1.부 트 스 트랩 특징
Bootstrap 이 매우 유행 하 는 것 은 매우 실 용적 인 기능 과 특징 덕분이다.주요 핵심 기능 특징 은 다음 과 같다.
(1).다 중 장치,다 중 브 라 우 저 는 모든 현대 브 라 우 저 를 호 환 할 수 있 습 니 다.이 는 지적 하 는 IE7,8 을 포함 합 니 다.
(3).전면적 인 구성 요 소 를 제공 합 니 다.Bootstrap 은 네 비게 이 션,태그,도구 막대,버튼 등 일련의 구성 요 소 를 제공 하여 개발 자 들 이 쉽게 호출 할 수 있 도록 합 니 다.
(4).jQuery 플러그 인 이 내장 되 어 있 습 니 다.Bootstrap 은 많은 실 용적 인 jquery 플러그 인 을 제공 합 니 다.이 플러그 인 들 은 개발 자 들 이 웹 의 각종 일반적인 효 과 를 실현 하 는 데 편리 합 니 다.
(5).HTML 5,CSS 3,HTML 5 의미 화 태그 와 CSS 3 속성 을 지원 합 니 다.모두 좋 은 지 지 를 받 습 니 다.
(6).LESS 동적 스타일 을 지원 합 니 다.LESS 는 변수,끼 워 넣 기,혼합 인 코딩 을 사용 하여 빠 르 고 유연 한 CSS 를 작성 합 니 다.Bootstrap 과 잘 어 울 려 개발 할 수 있 습 니 다.
2.Boostrap 도입
// Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
페이지 주체
Bootstrap 은 전역 font-size 를 14px 로 설정 하고 line-height 줄 높이 는 1.428(즉
20px)；
단락 요소 가 1/2 줄 높이(즉 10px)로 설정 되 었 습 니 다.색상 이\#333 으로 설정 되 었 습 니 다.
텍스트 정렬 설정
<p class="text-left">Bootstrap </p> //
<p class="text-center">Bootstrap </p> //
<p class="text-right">Bootstrap </p> //
<p class="text-justify">Bootstrap </p> // ，
<p class="text-nowrap">Bootstrap </p> //
<p class="text-lowercase">Bootstrap </p> //
<p class="text-uppercase">Bootstrap </p> //
<p class="text-capitalize">Bootstrap </p> //
Bootstrap<abbr title="Bootstrap" class="initialism"> </abbr>
// ， ， ， 20px
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
// ， ，
<blockquote>Bootstrap </blockquote>
//
<blockquote class="blockquote-reverse ">Bootstrap </blockquote>
//
<ul class="list-unstyled">
<li>Bootstrap </li>
<li>Bootstrap </li>
<li>Bootstrap </li>
<li>Bootstrap </li>
<li>Bootstrap </li>
</ul>
//
<ul class="list-inline">
<li>Bootstrap </li>
<li>Bootstrap </li>
<li>Bootstrap </li>
<li>Bootstrap </li>
<li>Bootstrap </li>
</ul>
//
<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap 。</dd>
</dl>
<code><section></code> //
press <kbd>ctrl + ,</kbd> //
<pre><p>Please input...</p></pre> //
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다.SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. D...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
