<blockquote><p>튜토리얼 추천: 부트스트랩 튜토리얼
Bootstrap이란 무엇인가요? Bootstrap ？
<p>官方介绍：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
<p>2.Bootstrap 下载
<p>Bootstrap3下载地址：http://v3.bootcss.com/getting...
<p>3.Bootstrap 文件目录结构dist
-css
-bootstrap.css
-bootstrap.css.map
-bootstrap.min.css（常用）
-bootstrap-theme.css
-bootstrap-theme.css.map
-bootstrap-theme.min.css
-fonts
-glyphicons-halflings-regular.eot
-glyphicons-halflings-regular.svg
-glyphicons-halflings-regular.ttf
-glyphicons-halflings-regular.woff
-js
-bootstrap.js
-bootstrap.min.js（常用）
-npm.jsBootstrap依赖<p>要想使用 Bootstrap ，那么必须先引入 jQuery（jquery.min.js）文件。<p>5.使用 Bootstrap<p>压缩版本适于实际应用，未压缩版本适于开发调试过程<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Bootstrap 基本模板<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 基本模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html><!DOCTYPE html> <html> ... </html>
<head>之中添加 viewport 元数据标签。<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no可以禁用其缩放（zooming）功能，这样后用户只能滚动屏幕。（看情况而定）<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scala=1, user-scalable=no">
body 元素设置 background-color: #fff;@font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数@link-color ，并且当链接处于 :hover 状态时才添加下划线scaffolding.less 文件中找到对应的源码。.container 容器。Bootstrap提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种容器类不能互相嵌套。<p>.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。<div class="container-fluid"> ... </div>
.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。.row 和 .col-xs-4공식 소개: 웹 개발을 더 빠르고 쉽게 만들어주는 간단하고 직관적이며 강력한 프런트 엔드 개발 프레임워크입니다. 🎜🎜2.Bootstrap 다운로드🎜🎜Bootstrap3 다운로드 주소: http://v3.bootcss.com/getting...🎜🎜🎜3.부트스트랩 파일 디렉터리 구조🎜/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }부트스트랩 종속성🎜🎜필수 Bootstrap을 사용하려면 먼저 jQuery(jquery.min.js) 파일을 도입해야 합니다. 🎜🎜5. 부트스트랩을 사용하세요🎜🎜압축된 버전은 실무에 적합하고, 압축되지 않은 버전은 개발 및 디버깅 프로세스에 적합합니다🎜@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Bootstrap 기본 템플릿🎜<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
viewport 메타데이터 태그를 <head>에 추가해야 합니다. 🎜<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>
user-scalable=no로 설정하여 확대/축소 기능을 비활성화하여 사용자가 화면을 스크롤만 할 수 있도록 할 수 있습니다. (상황에 따라 다름) 🎜<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
body 요소에 대한 배경색 설정: #fff;🎜 사용 @font-family-base, @font-size-base 및 @line-height-base 변수는 조판을 위한 기본 매개변수 역할을 합니다🎜@link-color을 설정하고, 링크가 :hover 상태일 때만 밑줄을 추가하세요🎜scaffolding.less 파일에서 찾을 수 있습니다. 🎜.container 컨테이너가 필요합니다. Bootstrap은 이러한 목적으로 두 가지 클래스를 제공합니다. padding과 같은 속성으로 인해 이 두 컨테이너 클래스는 서로 중첩될 수 없습니다. 🎜🎜.container 클래스는 반응형 레이아웃을 지원하는 고정 너비 컨테이너에 사용됩니다. 🎜<p class="lead">...</p>
.container-fluid 클래스는 너비가 100%이고 전체 뷰포트를 차지하는 컨테이너에 사용됩니다. 🎜You can use the mark tag to <mark>highlight</mark> text.
.container(고정 너비) 또는 .container-fluid </code에 포함되어야 합니다. > (100% 너비) 적절한 정렬 및 패딩을 제공합니다. 🎜</li><li>🎜"행"을 통해 가로 방향으로 "열" 그룹을 만듭니다. 🎜</li><li>🎜콘텐츠는 "열" 내에 배치되어야 하며 "열"만 행의 직접 하위 요소가 될 수 있습니다. 🎜</li>< li>🎜 <code>.row와 같은 사전 정의된 클래스입니다. 및 .col-xs-4는 Bootstrap 소스 코드에 정의된 믹스인을 사용하여 그리드 레이아웃을 빠르게 생성하는 데 사용할 수 있습니다. 시맨틱 레이아웃을 생성하는 데 사용할 수 있습니다.padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。.col-xs-4..col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present./* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 同左 | 同左 |
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | 12 | 12 | 12 |
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | 同左 | 同左 | 同左 |
| 可嵌套 | 是 | 是 | 是 | 是 |
| 偏移（Offsets） | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
.col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。<p>
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
.col-xs-*和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。<p>
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式<p>
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>
<small> 标签或赋予 .small 类的元素，可以用来标记副标题。<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
font-size 设置为 <strong>14px，line-height 设置为 <strong>1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。.lead 类可以让段落突出显示。<p class="lead">...</p>
@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式<mark> 标签You can use the mark tag to <mark>highlight</mark> text.
<del> 标签。<p>
<del>This line of text is meant to be treated as deleted text.</del>
<s> 标签。<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
<ins> 标签<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
<u> 标签。<p>
<u>This line of text will render as underlined</u>
<small><strong> 标签<em> 标签
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
<blockquote> 来表示引用样式。对于直接引用，建议使用 <p> 标签。<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
<ul> <li>...</li> </ul>
<ol> <li>...</li> </ol>
For example, <code><section></code> should be wrapped as inline.
kbd 标签标记用户通过键盘输入的内容。<p>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">로그인 후 복사</div></div> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<var></var> 标签标记变量
<samp></samp> 태그를 사용하여 프로그램 출력 내용을 표시하세요
위 내용은 부트스트랩 초보자가 마스터해야 할 지식 포인트에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
