本篇文章给大家介绍一下初学、入门Bootstrap需掌握的知识点。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
BootstrapBootstrap中文网：http://www.bootcss.com/ 1.什么是 官方介绍：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2. Bootstrap3下载地址：http://v3.bootcss.com/getting... 3. 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.js4. 要想使用 5.使用 压缩版本适于实际应用，未压缩版本适于开发调试过程
<!-- 新 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. <!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>Bootstrap 实例精选：http://v3.bootcss.com/getting-started/#examples 全局 CSS 样式HTML5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。 <!DOCTYPE html> <html> ... </html> 移动设备优先在 bootstrap3 中移动设备优先考虑的。为了保证适当的绘制和触屏缩放，需要在 <meta name="viewport" content="width=device-width, initial-scale=1"> 在移动设备浏览器上，可以通过视口 viewport 设置meta属性为 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scala=1, user-scalable=no"> 排版与链接Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
这些样式都能在 Normalize.css为了增强跨浏览器表现的一致性，bootstrap使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。 布局容器Bootstrap 需要为页面内容和栅格系统包裹一个
<div class="container"> ... </div>
<div class="container-fluid"> ... </div> 栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
通过研究后面的实例，可以将这些原理应用到你的代码中。 媒体查询在栅格系统中，我们在 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) { ... }偶尔也会在媒体查询代码中包含 @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> 排版标题HTML 中的所有标题标签，
<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> 在标题内还可以包含 <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> 页面主体Bootstrap 将全局 中心内容通过添加 <p class="lead">...</p> 使用 Less 工具构建variables.less 文件中定义的两个 Less 变量决定了排版尺寸： 内联文本元素标记文本为了高亮文本，可以使用 You can use the mark tag to <mark>highlight</mark> text. 被删除的文本对于被删除的文本，可以使用
<del>This line of text is meant to be treated as deleted text.</del> 无用文本对于无用文本可以使用
<s>This line of text is meant to be treated as no longer accurate.</s> 插入文本而外插入文本使用
<ins>This line of text is meant to be treated as an addition to the document.</ins> 带下划线的文本为文本添加下划线，使用
<u>This line of text will render as underlined</u> 小号文本使用标签 着重强调使用标签 斜体使用 文本对齐
<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>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. 用户输入通过
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> 代码块多行代码可以使用 变量通过 程序输出通过 期待后面的文章！更多编程相关知识，请访问：编程入门！！ 以上就是谈谈初学Bootstrap需掌握的知识点的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
