목차
부트스트랩 초보자가 마스터해야 할 지식 포인트에 대해 이야기해 보겠습니다.
bootstrap
<p>
<blockquote><p>튜토리얼 추천: 부트스트랩 튜토리얼
<p>4.<p>6.<p>Bootstrap 实例精选：http://v3.bootcss.com/getting-started/#examples<p>在移动设备浏览器上，可以通过视口 viewport 设置meta属性为<p>
<blockquote><p>튜토리얼 추천: 부트스트랩 튜토리얼
Bootstrap
<p>Bootstrap 중국어 웹사이트: http://www.bootcss.com/ <p>1Bootstrap이란 무엇인가요? 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.js로그인 후 복사
Bootstrap依赖<p>要想使用 Bootstrap ，那么必须先引入 jQuery（jquery.min.js）文件。<p>5.使用 Bootstrap<p>压缩版本适于实际应用，未压缩版本适于开发调试过程- <p>直接引用官网下载下来的文件。
- <p>使用 Bootstrap 中文网提供的免费 CDN 服务。
<!-- 新 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 ></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 id="你好-世界">你好，世界！</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>로그인 후 복사
<strong>全局 CSS 样式
HTML5 文档类型
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。<!DOCTYPE html> <html> ... </html>
로그인 후 복사
移动设备优先
<p>在 bootstrap3 中移动设备优先考虑的。为了保证适当的绘制和触屏缩放，需要在<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">
로그인 후 복사
排版与链接
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是：- <p>为
body元素设置background-color: #fff; - <p>使用
@font-family-base、@font-size-base和@line-height-basea变量作为排版的基本参数 - <p>为所有链接设置了基本颜色
@link-color，并且当链接处于:hover状态时才添加下划线
scaffolding.less 文件中找到对应的源码。Normalize.css
<p>为了增强跨浏览器表现的一致性，bootstrap使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。布局容器
<p>Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。Bootstrap提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种容器类不能互相嵌套。<p>.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ... </div>
로그인 후 복사
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。<div class="container-fluid"> ... </div>
로그인 후 복사
<strong>栅格系统
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。简介
<p>栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：- <p>“行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - <p>通过“行（row）”在水平方向创建一组“列（column）”。
- <p>你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- <p>类似
.row和.col-xs-4공식 소개: 웹 개발을 더 빠르고 쉽게 만들어주는 간단하고 직관적이며 강력한 프런트 엔드 개발 프레임워크입니다. 🎜🎜2.Bootstrap다운로드🎜🎜Bootstrap3 다운로드 주소: http://v3.bootcss.com/getting...🎜🎜🎜3.부트스트랩파일 디렉터리 구조🎜🎜4./* 超小屏幕（手机，小于 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.부트스트랩을 사용하세요🎜🎜압축된 버전은 실무에 적합하고, 압축되지 않은 버전은 개발 및 디버깅 프로세스에 적합합니다🎜- 🎜에서 다운로드한 파일을 직접 인용하세요. 공식 웹사이트. 🎜
- 🎜부트스트랩 중국어 홈페이지에서 제공하는 무료 CDN 서비스를 이용해 보세요. 🎜
🎜6.@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기본 템플릿🎜🎜Bootstrap 예시 선택: http://v3.bootcss.com/getting-started/#examples🎜🎜<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>
로그인 후 복사로그인 후 복사<strong>전역 CSS 스타일🎜
HTML5 문서 유형
🎜Bootstrap에서 사용되는 일부 HTML 요소 및 CSS 속성은 페이지를 HTML5 문서 유형으로 설정해야 합니다. 🎜<!-- 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>
로그인 후 복사로그인 후 복사모바일 우선
🎜부트스트랩의 모바일 우선3. 적절한 그리기 및 터치 크기 조정을 보장하려면viewport메타데이터 태그를<head>에 추가해야 합니다. 🎜🎜모바일 장치 브라우저에서는 뷰포트를 통해 메타 속성을<h1 id="h-nbsp-Bootstrap-nbsp-heading">h1. Bootstrap heading</h1> <h2 id="h-nbsp-Bootstrap-nbsp-heading">h2. Bootstrap heading</h2> <h3 id="h-nbsp-Bootstrap-nbsp-heading">h3. Bootstrap heading</h3> <h4 id="h-nbsp-Bootstrap-nbsp-heading">h4. Bootstrap heading</h4> <h5 id="h-nbsp-Bootstrap-nbsp-heading">h5. Bootstrap heading</h5> <h6 id="h-nbsp-Bootstrap-nbsp-heading">h6. Bootstrap heading</h6>
로그인 후 복사로그인 후 복사user-scalable=no로 설정하여 확대/축소 기능을 비활성화하여 사용자가 화면을 스크롤만 할 수 있도록 할 수 있습니다. (상황에 따라 다름) 🎜<h1 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h1. Bootstrap heading <small>Secondary text</small></h1> <h2 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h2. Bootstrap heading <small>Secondary text</small></h2> <h3 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h3. Bootstrap heading <small>Secondary text</small></h3> <h4 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h4. Bootstrap heading <small>Secondary text</small></h4> <h5 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h5. Bootstrap heading <small>Secondary text</small></h5> <h6 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h6. Bootstrap heading <small>Secondary text</small></h6>
로그인 후 복사로그인 후 복사조판 및 링크
🎜Bootstrap 조판 및 링크 스타일은 기본 전역 스타일을 설정합니다. 🎜- 🎜
body요소에 대한배경색 설정: #fff;🎜 - 🎜
사용 @font-family-base,@font-size-base및@line-height-base변수는 조판을 위한 기본 매개변수 역할을 합니다🎜 < li>🎜모든 링크에 기본 색상
@link-color을 설정하고, 링크가:hover상태일 때만 밑줄을 추가하세요🎜 < /ul>🎜 이러한 스타일에 해당하는 소스 코드는 - 🎜"row"는
.container(고정 너비) 또는.container-fluid </code에 포함되어야 합니다. > (100% 너비) 적절한 정렬 및 패딩을 제공합니다. 🎜</li><li>🎜"행"을 통해 가로 방향으로 "열" 그룹을 만듭니다. 🎜</li><li>🎜콘텐츠는 "열" 내에 배치되어야 하며 "열"만 행의 직접 하위 요소가 될 수 있습니다. 🎜</li>< li>🎜 <code>.row와 같은 사전 정의된 클래스입니다.및.col-xs-4는 Bootstrap 소스 코드에 정의된 믹스인을 사용하여 그리드 레이아웃을 빠르게 생성하는 데 사용할 수 있습니다. 시맨틱 레이아웃을 생성하는 데 사용할 수 있습니다. - <p>通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - <p>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
- <p>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4. - <p>如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- <p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.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.
scaffolding.less 파일에서 찾을 수 있습니다. 🎜Normalize.css
🎜크로스 브라우저 성능의 일관성을 향상시키기 위해 부트스트랩은 Normalize.css🎜 - Nicolas Gallagher🎜 및 Jonathan Neal🎜이 관리하는 CSS 재설정 스타일 라이브러리입니다. 🎜레이아웃 컨테이너
🎜Bootstrap은 페이지 콘텐츠와 그리드 시스템을 래핑하기 위해.container 컨테이너가 필요합니다. Bootstrap은 이러한 목적으로 두 가지 클래스를 제공합니다. padding과 같은 속성으로 인해 이 두 컨테이너 클래스는 서로 중첩될 수 없습니다. 🎜🎜.container 클래스는 반응형 레이아웃을 지원하는 고정 너비 컨테이너에 사용됩니다. 🎜<p class="lead">...</p>
로그인 후 복사
로그인 후 복사
.container-fluid 클래스는 너비가 100%이고 전체 뷰포트를 차지하는 컨테이너에 사용됩니다. 🎜You can use the mark tag to <mark>highlight</mark> text.
로그인 후 복사
로그인 후 복사
<strong>그리드 시스템🎜🎜Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면이나 뷰포트 크기가 증가하면 시스템이 자동으로 최대 12개의 열로 나뉩니다. 여기에는 사용하기 쉬운 사전 정의된 클래스🎜와 강력함 믹스인은 보다 의미 있는 레이아웃을 생성하는 데 사용됩니다 🎜. 🎜소개
🎜 그리드 시스템은 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용되며, 생성된 레이아웃에 콘텐츠를 배치할 수 있습니다. Bootstrap 그리드 시스템의 작동 방식에 대한 소개는 다음과 같습니다. 🎜
<p>通过研究后面的实例，可以将这些原理应用到你的代码中。媒体查询
<p>在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }로그인 후 복사로그인 후 복사<p>偶尔也会在媒体查询代码中包含 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) { ... }로그인 후 복사로그인 후 복사栅格参数
<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }로그인 후 복사
로그인 후 복사
@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） | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 |
实例：从堆叠到水平排列
<p>使用单一的一组.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>
로그인 후 복사
로그인 후 복사
实例：移动设备和桌面屏幕
<p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即.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>
로그인 후 복사
로그인 후 복사
<strong>排版
标题
<p>HTML 中的所有标题标签， 到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式<p><h1 id="h-nbsp-Bootstrap-nbsp-heading">h1. Bootstrap heading</h1> <h2 id="h-nbsp-Bootstrap-nbsp-heading">h2. Bootstrap heading</h2> <h3 id="h-nbsp-Bootstrap-nbsp-heading">h3. Bootstrap heading</h3> <h4 id="h-nbsp-Bootstrap-nbsp-heading">h4. Bootstrap heading</h4> <h5 id="h-nbsp-Bootstrap-nbsp-heading">h5. Bootstrap heading</h5> <h6 id="h-nbsp-Bootstrap-nbsp-heading">h6. Bootstrap heading</h6>
로그인 후 복사
로그인 후 복사
<small> 标签或赋予 .small 类的元素，可以用来标记副标题。<h1 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h1. Bootstrap heading <small>Secondary text</small></h1> <h2 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h2. Bootstrap heading <small>Secondary text</small></h2> <h3 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h3. Bootstrap heading <small>Secondary text</small></h3> <h4 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h4. Bootstrap heading <small>Secondary text</small></h4> <h5 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h5. Bootstrap heading <small>Secondary text</small></h5> <h6 id="h-nbsp-Bootstrap-nbsp-heading-nbsp-small-Secondary-nbsp-text-small">h6. Bootstrap heading <small>Secondary text</small></h6>
로그인 후 복사
로그인 후 복사
页面主体
<p>Bootstrap 将全局font-size 设置为 <strong>14px，line-height 设置为 <strong>1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。中心内容
<p>通过添加.lead 类可以让段落突出显示。<p class="lead">...</p>
로그인 후 복사
로그인 후 복사
使用 Less 工具构建
<p><strong>variables.less 文件中定义的两个 Less 变量决定了排版尺寸：@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式内联文本元素
标记文本
<p>为了高亮文本，可以使用<mark> 标签You can use the mark tag to <mark>highlight</mark> text.
로그인 후 복사
로그인 후 복사
被删除的文本
<p>对于被删除的文本，可以使用<del> 标签。<p><del>This line of text is meant to be treated as deleted text.</del>
로그인 후 복사
无用文本
<p>对于无用文本可以使用<s> 标签。<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
로그인 후 복사
插入文本
<p>而外插入文本使用<ins> 标签<p><ins>This line of text is meant to be treated as an addition to the document.</ins>
로그인 후 복사
带下划线的文本
<p>为文本添加下划线，使用<u> 标签。<p><u>This line of text will render as underlined</u>
로그인 후 복사
小号文本
<p>使用标签<small>着重强调
<p>使用标签<strong> 标签斜体
<p>使用<em> 标签文本对齐
<p>
<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>
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
로그인 후 복사
引用
<p>在你的文档中引用其他的来源，可以使用<blockquote> 来表示引用样式。对于直接引用，建议使用 <p> 标签。<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
로그인 후 복사
列表
无序列表
<p>排列顺序<em>无关紧要的一列元素。<ul> <li>...</li> </ul>
로그인 후 복사
有序列表
<p>顺序<em>至关重要的一组元素<ol> <li>...</li> </ol>
로그인 후 복사
代码
内联代码
For example, <code><section></code> should be wrapped as inline.
로그인 후 복사
用户输入
<p>通过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>
로그인 후 복사
代码块
<p>多行代码可以使用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">로그인 후 복사</div></div> 标签。为了正确的展示代码，注意将尖括号做转义处理。
变量
<p>通过<var></var> 标签标记变量
프로그램 출력
<p><samp></samp> 태그를 사용하여 프로그램 출력 내용을 표시하세요
다음 기사도 기대해주세요!
<p>더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !위 내용은 부트스트랩 초보자가 마스터해야 할 지식 포인트에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전
By DDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전
By 尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7530
15
7530
15
Cakephp 튜토리얼
1378
52
1378
52
Steam의 계정 이름 형식은 무엇입니까?
82
11
82
11
Win11 활성화 키 영구
54
19
54
19
NYT 연결 힌트와 답변
21
76
21
76
부트 스트랩 검색 창을 얻는 방법
Apr 07, 2025 pm 03:33 PM
부트 스트랩을 사용하여 검색 표시 줄의 값을 얻는 방법 : 검색 표시 줄의 ID 또는 이름을 결정하십시오. JavaScript를 사용하여 DOM 요소를 얻으십시오. 요소의 값을 가져옵니다. 필요한 작업을 수행하십시오.
부트 스트랩의 수직 중심을 수행하는 방법
Apr 07, 2025 pm 03:21 PM
부트 스트랩을 사용하여 수직 센터링을 구현하여 : Flexbox Method : D-Flex, 정당화 컨텐츠 중심 및 정렬 중심 센터 클래스를 사용하여 Flexbox 컨테이너에 요소를 배치하십시오. Align-Items-Center 클래스 방법 : Flexbox를 지원하지 않는 브라우저의 경우 상위 요소의 높이가 정의 된 경우 Align-Items 중심 클래스를 사용하십시오.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
