부트스트랩 초보자가 마스터해야 할 지식 포인트에 대해 이야기해 보겠습니다.-JS 튜토리얼-php.cn

<blockquote>튜토리얼 추천: 부트스트랩 튜토리얼

Bootstrap

Bootstrap 중국어 웹사이트: http://www.bootcss.com/

1 Bootstrap이란 무엇인가요? Bootstrap ？

官方介绍：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

2.Bootstrap 下载

Bootstrap3下载地址：http://v3.bootcss.com/getting...

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

로그인 후 복사

4.Bootstrap依赖

要想使用 Bootstrap ，那么必须先引入 jQuery（jquery.min.js）文件。

5.使用 Bootstrap

压缩版本适于实际应用，未压缩版本适于开发调试过程

直接引用官网下载下来的文件。
使用 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 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>

로그인 후 복사

6.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&#39;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&#39;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>

로그인 후 복사

Bootstrap 实例精选：http://v3.bootcss.com/getting-started/#examples

全局 CSS 样式

HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。

<!DOCTYPE html>
<html>
  ...
</html>

로그인 후 복사

移动设备优先

在 bootstrap3 中移动设备优先考虑的。为了保证适当的绘制和触屏缩放，需要在<head>之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

로그인 후 복사

在移动设备浏览器上，可以通过视口 viewport 设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能，这样后用户只能滚动屏幕。（看情况而定）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scala=1, user-scalable=no">

로그인 후 복사

排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

Normalize.css

为了增强跨浏览器表现的一致性，bootstrap使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。Bootstrap提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

로그인 후 복사

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

로그인 후 복사

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

类似 .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) { ... }

	超小屏幕手机 (<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）	是	是	是	是
列排序	是	是	是	是

부트스트랩 초보자가 마스터해야 할 지식 포인트에 대해 이야기해 보겠습니다.

Bootstrap

<strong>全局 CSS 样式

HTML5 文档类型

移动设备优先

排版与链接

Normalize.css

布局容器

<strong>栅格系统

简介

<strong>전역 CSS 스타일🎜

HTML5 문서 유형

모바일 우선

조판 및 링크

Normalize.css

레이아웃 컨테이너

소개

媒体查询

栅格参数

实例：从堆叠到水平排列

实例：移动设备和桌面屏幕

<strong>排版

标题

页面主体

中心内容

使用 Less 工具构建

内联文本元素

标记文本

被删除的文本

无用文本

插入文本

带下划线的文本

小号文本

着重强调

斜体

文本对齐

改变大小写

引用

列表

无序列表

有序列表

代码

内联代码

用户输入

代码块

变量

프로그램 출력

다음 기사도 기대해주세요!