부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법?
- 青灯夜游원래의
- 2018-10-18 17:42:246769검색
부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법? 프론트엔드 개발을 처음 접하시는 분들은 부트스트랩이 조금 낯설으실 거라 생각합니다. 그래서 이번 글에서는 Bootstrap의 의미와 Bootstrap의 사용법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 알아보겠습니다. 부트스트랩이 무엇인가요?
Bootstrap은 웹 애플리케이션 및 웹 사이트의 신속한 개발을 위해 html, css 및 JavaScript를 기반으로 하는 오픈 소스 웹 프런트 엔드 프레임워크로, 유명한 소셜 네트워킹 사이트이자 Weibo의 선구자인 Twitter에서 2011년 8월에 출시했습니다. HTML, CSS 및 JavaScript를 통합하고 최신 브라우저 기술을 사용하여 레이아웃, 그리드, 테이블, 버튼, 양식, 탐색, 프롬프트 및 기타 구성 요소를 포함한 신속한 웹 프런트 엔드 개발을 위한 프런트 엔드 툴킷을 제공합니다. Bootstrap을 사용하면 리소스를 거의 사용하지 않는 매우 우아한 프런트 엔드 인터페이스를 구축할 수 있습니다.
부트스트랩 소개는 여기까지입니다. 부트스트랩에 대해 더 알고 싶다면 부트스트랩 튜토리얼을 방문하세요!
부트스트랩이 무엇인지 읽어본 후 부트스트랩 사용법을 살펴보겠습니다.
Bootstrap 프레임워크를 사용하는 단계:
1. Bootstrap 다운로드
먼저 다운로드하려면 공식 Bootstrap 웹사이트(http://www.bootcss.com/)로 이동해야 합니다.
클릭 빨간색 선 테두리에서 다운로드 페이지로 이동할 수 있습니다. 세 가지 방법 중에서 선택할 수 있습니다. 그러나 현재는 초기 사용 단계이므로 프로덕션 환경에서 직접 Bootstrap을 사용해야 합니다. 첫 번째 패키지인
을 다운로드하면 bootstrap-3.3.7 -dist라는 압축 패키지가 제공됩니다. .zip, 압축을 푼 후 내부 파일을 살펴보겠습니다.
이 파일의 경우 내부 파일 중 일부를 살펴보겠습니다.
bootstrap.css: 압축되지 않은 완전한 부트스트랩 스타일 시트, 개발 중 디버깅에 사용될 수 있습니다.
bootstrap.min.css: 압축된 부트스트랩 스타일 시트로 내용은 bootstrap.css와 완전히 같지만, 중간에 불필요한 공백이나 기타 내용이 삭제되어 파일 크기가 bootstrap.css보다 작아집니다. . 웹 사이트 배포 시 참조할 수 있는 파일입니다. 이 파일을 참조하면 bootstrap.css를 참조할 필요가 없습니다.
bootstrap.js: 이것은 부트스트랩의 모든 js 명령의 모음입니다. 부트스트랩의 모든 js 효과가 이 파일에 의해 제어된다는 것을 알 수 있습니다. 개발 중 디버깅에 사용됩니다.
bootstrap.min.js: bootstrap.js의 압축 버전입니다. 내용은 bootstrap.js와 동일하지만, 웹사이트 배포 시 bootstrap.js를 참조할 수 없습니다. 대신에 이것을 참조하세요. (두 가지 방법)
② BootCDN에서 제공하는 무료 CDN 가속 서비스를 직접 사용할 수 있습니다(http 및 https 프로토콜 모두 지원). 액세스 속도가 빨라지고 가속 효과가 커집니다. 더 확실한 점은 속도와 대역폭 제한이 없으며 영구적으로 무료라는 것입니다. BootCDN은 또한 다수의 프런트엔드 오픈 소스 도구 라이브러리에 대한 CDN 가속 서비스를 제공합니다. 더 많은 사용 가능한 도구 라이브러리를 보려면 BootCDN 홈페이지로 이동하세요.
Note
:
예제를 통해 부트스트랩의 사용법을 살펴보겠습니다---부트스트랩의 글꼴 아이콘 사용<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--最新bootstrap 核心 css 文件-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--可选的bootstrap主题文件(一般不引入)-->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<style>
ul{
width: 200px;
height: 500px;
margin: 50px auto;
}
li{
list-style: none;
font-size: 50px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<li><i class="glyphicon glyphicon-user"></i></li>
<li><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-lock"></i></li>
<li><i class="glyphicon glyphicon-qrcode"></i></li>
</ul>
</body>
<!--jquery文件 务必在bootstrap.min.css前引用-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--最新bootstrap 核心 javascript 文件-->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</html>렌더링:
부트스트랩에서 지원하는 모든 글꼴 아이콘은 부트스트랩 공식 홈페이지(https://v3.bootcss.com/comComponents/) 컴포넌트 페이지에서 확인하실 수 있습니다.
위 내용은 부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!