부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법?-CSS 튜토리얼-php.cn

부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법?

青灯夜游

풀어 주다： 2018-10-19 09:16:23

원래의

6849명이 탐색했습니다.

부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법? 프론트엔드 개발을 처음 접하시는 분들은 부트스트랩이 조금 낯설으실 거라 생각합니다. 그래서 이번 글에서는 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

: 부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법?

bootstrap.min.css, jquery.min.js 및 bootstrap.min.js는 순서대로 도입되어서는 안 됩니다. 일반적으로 jquery.min.js는 두 개의 파일 bootstrap.min.js가 html 웹 페이지 문서 하단에 배치됩니다. 이는 웹 페이지가 로드되기 전에 이 두 파일을 먼저 로드할 때 발생할 수 있는 불필요한 문제를 방지하기 위한 것입니다.

예제를 통해 부트스트랩의 사용법을 살펴보겠습니다---부트스트랩의 글꼴 아이콘 사용

<!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>

로그인 후 복사

렌더링:

부트스트랩은 무엇을 의미하나요? 부트스트랩을 사용하는 방법?