bootstrap3菜鸟教程（菜鸟工具 bootstrap 怎么导入css）

本文目录

• 菜鸟工具 bootstrap 怎么导入css
• Bootstrap基本使用
• 如何学习bootstrap框架
• 如何使用Bootstrap网格系统
• 如何用 bootstrap 创建一个网站
• web前端开发框架bootstrap 怎么使用

菜鸟工具 bootstrap 怎么导入css

和引入普通的CSS一样，只不过是加载的CSS样式不同，希望对你有帮助，望采纳！
代码如下：
***隐藏网址***

Bootstrap基本使用

Bootstrap是当前流行的前端框架。下面，我们来看看Bootstrap的基本使用吧。

• 01

  Bootstrap中文网
  在浏览器中输入【Bootstrap中文网】，然后点击相关的链接，如下图所示：

• 02

  Bootstrap中文文档
  然后会进入相关的页面，点击【Bootstrap中文文档】按钮，如下图所示：

• 03

  下载Bootstrap
  然后点击【下载Bootstrap】按钮，如下图所示：

• 04

  Bootstrap教程
  下载相关文档之后就可以使用文档中的JS文件，然后在浏览器中输入【Bootstrap教程】，即可学习简单的Bootstrap使用方法。

如何学习bootstrap框架

全局样式
1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“《!DOCTYPE html》”
2
布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。
3
栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。
4
Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px，line-height 设置为 1.428。
《p》 （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
基础样式
【排版】，
1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过《small》 标签或带.small 类的元素标记副标题。
主体文本：.lead 类让段落突出显示。
2. 内联文本，使用《mark》 标签表示标注文本，《del》删除，《s》无用，《ins》插入，《u》下划线，《small》小号（父容器字体大小的 85%），《strong》着重，《em》斜体。
3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap
4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize
5. 缩略语类，为 《abbr》 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：《abbr title="attribute" class="initialism"》attr《/abbr》
6. 地址，以日常使用的格式呈现，在行结尾加 《br》 保留需要的样式即可。
7. 引用，将 HTML 元素包裹在 《blockquote》 中即可表现为引用样式。对于直接引用，建议用 《p》 标签。
8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让 《dl》 内的短语及其描述排在一行。
【代码】
《code》 标签包裹内联样式的代码片段，
《kbd》 标签标记用户通过键盘输入的内容，
《pre》 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。
《var》 标签标记变量，
《samp》 标签标记程序输出的内容。
【表格】
.table 类指定基本样式，
.table-striped 条纹样式，
.table-bordered 类为边框样式，
.table-hover 类带鼠标悬停样式，
.table-condensed 类紧凑样式。
状态类(行或单元格设置颜色)：active，success，info，warning，info。
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其
响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
【表单】
1. 基本实例，所有设置了 .form-control 类的 《input》、《textarea》 和 《select》 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
form-group，input-group，control-group，
2. 内联表单，《form》 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在内联表单中单选/多选框控件的宽度设置为 width: auto;
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。
3. 水平排列的表单
通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）
4. 多选和单选框
.radio、.radio-inline、.checkbox、.checkbox-inline 。
5. 静态控件
水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为 《p》 元素添加 .form-control-static类即可。
6. 控件状态
.disabled类禁用控件，为《fieldset》 设置disabled 时则禁用包含的所有控件。
a标签不受此类影响。
readonly 属性可以禁止用户输入
.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。
7. 控件尺寸
通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
8. 辅助文本
help-block类，针对表单控件的“块（block）”级辅助文本。
【按钮】
1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active
2. 展现形式，btn-link、btn-block、close
3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。
可通过 《a》、《button》 或 《input》 元素应用按钮类，但建议用 《button》 元素来获得在各个浏览器上获得相匹配的绘制效果。
6
【图片】
图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。
7
【辅助】
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger、
三角符号，caret
浮动
居中
组件样式
【图标】
200个来自 Glyphicon Halflings 的字体图标，
图标类只能应用在空元素上，且不可与其它组件联合使用。
《span class="glyphicon glyphicon-search"》《/span》
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组：dropdown-header表描述项，.disabled 表禁用项
向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开
【按钮组】
按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。
按钮栏.btn-toolbar
钮垂直堆叠排列显示btn-group-vertical
两端对齐排列的按钮组btn-group-justified
【导航】
标签页.nav-tabs 类依赖 .nav 基类。
胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
navbar navbar-default
对于不包含在 《form》 中的 《button》 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失。
.navbar-inverse 类可以改变导航条的外观。
breadcrumb 创建带有层次的导航结构（面包屑）。
【分页】
pagination，并根据情况对页码使用.disabled 类、 .active 类。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
pager上一页和下一页的简单翻页。并可通过previous，next类标示。
【标签】
label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。
badge，可以很醒目的展示新的或未读的信息条目。
7
【其它】
缩略图
提示框
进度条
媒体对象等
定制样式
1
BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。
END
总结
1
本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。

如何使用Bootstrap网格系统

　　正如您可能知道的，在图形设计中，网格系统是一个二维结构，由水平轴和垂直轴相交的区域组成，用于构建内容。它被广泛应用于平面设计的设计布局和内容结构。在网页设计中，它是一种通过使用 HTML 和 CSS 来快速有效地创建一致的布局的非常有效的方法。因此，网格系统已经成为网页设计的框架或工作流程的一个重要的组件/模块。
　　简单的说，在网页设计中，我们使用 HTML 和 CSS 创建行和列来实现一个网格。且列中包含了实际内容。
　　自版本 2.3.2 起，Bootstrap 提供了两种类型的网格。默认的网格系统是 940px 宽和 12 列。您可以添加响应式的样式表让它随着呈现的视口调整宽度为 724px 和 1170px。
　　这里还设有一个流动网格系统，它是基于百分比的，而不是基于像素的。且可被扩展为像默认固定网格一样具有响应性。在本教程中我们将通过一些实例来讨论默认网格，流动网格系统将在另一个单独的教程进行讲解。
　　
　　从默认网格入门
　　让我们先从一个基本的 HTML 开始，看看如何在上面应用默认网格。
　　
　　
　　《!DOCTYPE html》
　　《html》
　　《head》
　　《title》Fixed layout example with Bootstrap《/title》
　　《meta name="viewport" content="width=device-width, initial-scale=1.0"》
　　《!-- Bootstrap --》
　　《link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"media="screen"》
　　《/head》
　　《body》
　　
***隐藏网址***
　　《script src="bootstrap/js/bootstrap.min.js"》《/script》
　　《/body》
　　《/html》
　　
　　Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。通过这两个就可以创建一个三列的网格（每一列包含一些文本内容），HTML 如下所示
　　
　　
　　《!DOCTYPE html》
　　《html》
　　《head》
　　《title》Fixed layout example with Bootstrap《/title》
　　《meta name="viewport" content="width=device-width, initial-scale=1.0"》
　　《!-- Bootstrap --》
　　《link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"media="screen"》
　　《/head》
　　《body》
　　《div class="container"》
　　《div class="row"》
　　《div class="span4"》《p》Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.《/p》《/div》
　　《div class="span4"》《p》Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.《/p》《/div》
　　《div class="span4"》《p》Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.《/p》《/div》
　　《/div》
　　《/div》
***隐藏网址***
　　《script src="bootstrap/js/bootstrap.min.js"》《/script》
　　《/body》
　　《/html》
　　
　　下面是网格系统的图形表示
　　这样，我们就通过对每个列使用 "span4" class，创建好了一个三列网格。"container" class 是用来保存整个结构的。您可以在这里查看在线实例。从这一点，我们可以推导出用于创建给定数量列的 CSS class 的一般语法。
　　创建网格的一般语法：
　　
　　
　　《div class="row"》
　　《div class="spanx"》
　　inline elements like span, block level elements like p, div.
　　《/div》
　　repeat 《div class="spanx"》 y times.
　　
　　其中 y 是您想要创建的列数以及 x 等于 12（这是您可以创建的最大的列数）的总和。x 必须是正整数，且值必须从 1 到 12。
　　例如，如果您有三个等宽的列，每个列都是 class="span4"，但是如果您想让第一个列比其他两个更大一些，第一个列可以使用 class="span6"，其他两个列使用 class="span3"。
　　如何在固定网格中创建行
　　接下来，在我们继续其他实例之前，先来看看在固定网格中用来创建行和列的 CSS 规则。
　　row class 如下所示
　　
　　
　　.row {
　　margin-left: -20px;
　　*zoom: 1;
　　}
　　
　　设置左边距为负的 20px，且设置 "*zoom: 1;"。这里的 "*" 表示所有元素的 zoom 属性都设置为 1，用来修复 IE6/7 的 bug。设置 zoom 属性为 1，即设置了一个名为 hasLayout 的内部属性，用于修复 IE6/7 的许多缩放/渲染问题。
　　
　　
　　.row:before,
　　.row:after {
　　display: table;
　　line-height: 0;
　　content: "";
　　}
　　
　　Bootstrap 使用前面的 CSS 代码来创建行。它使用 ":before" 和 ":after" 的 CSS 属性。这两个是伪元素。":before" 用于在目标元素之前插入一些内容，":after" 用于在目标元素之后插入一些内容。"display:table;" 使得元素以表格形式呈现。通过设置 "line-height: 0;" 来确保每个行没有自己的行高，通过使用 ’content: ""’ 来确保元素前后没有内容被插入。

如何用 bootstrap 创建一个网站

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。
首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架，它为所有的组键都提供了详细的用例，让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档：twitter.github.com/bootstrap/index.html
基本的HTML模板
我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头，复制这些代码到一个文件中并将其命名为index.html。
《!DOCTYPE html》
《head》
《title》Twitter Bootstrap Tutorial - A responsive layout tutorial《/title》
《style type=’text/css’》
body {
background-color: #CCC;
}
《/style》
《/head》
《body》
《/body》
《/html》
这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色，因为这样我们能够轻易地在我们的设计中看见不同的列，使它更加容易理解。
引入twitter bootstrap文件
为了使用twitter bootstrap我们仅仅需要把一个文件引入到我们的模板当中来，引入文件有很多种方法，如果你想了解这些方法请查阅相关文档。
基于本教程的出发点，我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。
***隐藏网址***
它能够使所有的twitter bootstrap CSS在我们的模板中生效。
Twitter Bootstrap的容器
bootstrap的container类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。
在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。
如果你调整这个DIV的高度并将其背景颜色设置为白色，你所看到的效果会是这样：
标题和导航
现在我们已经有一个地方可以添加额外的HTML代码，我们可以添加标题文本然后再创建站点的主要导航条。
加入如下的文本或者你选择的文字到container类的div标签当中。
《h1》TWITTER BOOTSTRAP TUTORIAL《/h1》
现在并没有多少新的东西，这仅仅是一个标题，让我们转移到更有趣的方面，twitter bootstrap导航。
Bootstrap 有一个nav类让我们能够创建各种各样的导航元素，你可以在h1标签之后加入如下的代码。
《div class=’navbar navbar-inverse’》
《div class=’nav-collapse’ style="height: auto;"》
《ul class="nav"》
《li class="active"》《a href="#"》Home《/a》《/li》
《li》《a href="#"》Page One《/a》《/li》
《li》《a href="#"》Page Two《/a》《/li》
《/ul》
《/div》
《/div》
navbar相关的类拥有导航条所有的样式，添加navbar-inverse类将会应用一个很酷的黑色风格，这是一个twitter bootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。
在类为navbar的DIV当中，我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto；这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时，它会提供一个压缩的切换视图。
如果你保存了index.html文件然后在浏览器中打开，当你调整浏览器窗口的宽度时你就能够看到这个变化，如图所示。
大于979px：
小于979px：
另外，我们可以添加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中应用更多的样式，也可以添加一个active类到“HOME”列表项中。

web前端开发框架bootstrap 怎么使用

方法/步骤
1
首先我们当然是需要得到Bootstrap相关文件，因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载。
2
如果你的英文水平不是太好的话，没关系，我们可以到国内做的汉化比较好的Bootstrap网站去下载，最新版本都是3，属于扁平化的那种。
3
以上两步点击下载按钮后都会跳转到一个详细下载列表，有三种Bootstrap，这里我们下载第一个就可以了。
4
下载完成后解压，会看到文件有三个子文件夹，分别是css、font、js，里面带min的文件都是压缩后的文件，在网站上线的时候用，其他未压缩的文件我们可以在平时开发的时候用。
5
再之后就是要用这套Bootstrap框架了，首先要做的就是建立一个html文件，你可以用任何文本器，这里推荐Dreamweaver CS6，个人感觉比较好用。
6
接下来就是要引入css文件了，要把文件的路径写正确，如果网页内用到了Bootstrap的js效果，那么必须先引入jQuery文件，因为Bootstrap的js插件都是基于jQuery的。
7
最后就可以在body标签内应用Bootstrap相关的class了，这些都是封装好的，只要嵌套正确就是做出漂亮的网页了。