Bootstrap基本使用？-学吧号

Bootstrap基本使用？

图片[1]-Bootstrap基本使用？-学吧号

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

Bootstrap中文网在浏览器中输入【Bootstrap中文网】，然后点击相关的链接，如下图所示： Bootstrap中文文档然后会进入相关的页面，点击【Bootstrap中文文档】按钮，如下图所示：下载Bootstrap 然后点击【下载Bootstrap】按钮，如下图所示： Bootstrap教程下载相关文档之后就可以使用文档中的JS文件，然后在浏览器中输入【Bootstrap教程】，即可学习简单的Bootstrap使用方法。

bootstrap 怎么用

图片[2]-Bootstrap基本使用？-学吧号

首先是引入文件，在HTML的<head>里加上：
<link href=”css/bootstrap.min.css” rel=”stylesheet”><script src=”js/jquery.min.js”></script><script src=”js/bootstrap.min.js”></script>
一个CSS文件，两个JS文件。注意：jquery.js文件一定要在bootstrap.js之前引入。

bootstrap 具体怎么用

图片[3]-Bootstrap基本使用？-学吧号

产品经理技术脑：Bootstrap

图片[4]-Bootstrap基本使用？-学吧号

什么是 Bootstrap？ Bootstrap 是Web 应用程序的前端框架。基于 HTML、CSS、JAVASCRIPT 。

Bootstrap由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作开发的，基于HTML、CSS、JavaScript 的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言Less写成，一直是GitHub上的热门开源项目。 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。在现在的 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。 Bootstrap版本功能发展 Bootstrap 与最新版的 Google Chrome、Firefox、Internet Explorer、Opera 和 Safari 浏览器兼容，尽管有些浏览器并不是支持所有操作系统。

从 2.0 版本开始，Bootstrap 支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备（桌面、平板电脑、手机）来进行动态调整。 3.0 版本开始，Bootstrap 将移动设备优先作为设计方针，更加强调了响应式设计。

4.0 alpha 版本添加 Sass 和 Flexbox 的支持。 Bootstrap特点 Bootstrap非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下： l跨设备、跨浏览器可以兼容所有现代浏览器，包括比较诟病的IE7、8。

当然，本课程不再考虑IE9以下浏览器。 l响应式布局不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。 l提供的全面的组件 Bootstrap提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

l内置jQuery插件 Bootstrap提供了很多实用性的jquery插件，这些插件方便开发者实现Web中各种常规特效。 l支持HTML5、CSS3 HTML5语义化标签和CSS3属性，都得到很好的支持。 l支持LESS动态样式 LESS使用变量、嵌套、操作混合编码，编写更快、更灵活的CSS。它和Bootstrap能很好的配合开发。

Bootstrap基本内容与组件 Bootstrap 包括 HTML、CSS 及 JavaScript 的框架，提供字体排印、窗体、按钮、导航及其他各种组件及 Javascript 扩展。主要包含内容有： l 基本结构： Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 l 全局CSS样式： Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。 l 组件： Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

l JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。 l 定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。 lBootstrap全局Css样式包括 Grid Typography Tables Forms Buttons Responsiveness。

如何学习bootstrap框架

图片[5]-Bootstrap基本使用？-学吧号

全局样式1Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“<!DOCTYPE html>”2布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。3栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

4Bootstrap 排版、链接样式设置了基本的全局样式。

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-nowrap4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize5. 缩略语类，为 <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、active2. 展现形式，btn-link、btn-block、close3. 尺寸样式，.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-dangerbg-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 类可以很容易的让标签页或胶囊式标签呈现出�。