bootstrap使用方法

‘壹’ bootstrap图标 怎么用

bootstrap引用图标的方法：

1、下载包并解压

在‘elegant_font’文件夹中会发现“HTMLCSS”子文件夹，把它复制到你的项目中（注意，这里可以重命名哦）

2、将连接添加到‘style.css’，html里添加一个图标，内容如下：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

<link rel="stylesheet" href="path/to/elegant-font/style.css">

可以在你HTML里添加图标，并且使用CSS来更改它们的样式：

<span aria-hidden="true" class="icon_pencil"></span>

以下是导入的矢量图标：

‘贰’ 如何来使用bootstrap table

你好，
使用bootstrap table方法：
bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的，也就是说 bootstrap是依赖jquery的，而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的，所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js，css文件。
接着说，bootstrap-table的特点:与jquery-ui，jqgrid等表格显示插件而言，bootstrap-table扁平化，轻量级,对于一些轻量级的数据显示，他是绰绰有余，而对父子表等的支持也很好，最主要的是可以与bootstrap的其他标签无缝组合。

‘叁’ bootstrap使用方法

面板样式是在很多种情况下都可能会使用到的样式之一，例如博客的侧边栏、企业网站的公告栏、栏目列表等。

面板样式除了内容之外，还有一个面板头部可以添加标题，让我们通过这篇文章看看Bootstrap面板样式的使用方法。

Bootstrap面板基本样式

直接调用面板样式也非常容易，只需要通过以下代码即可实现：

<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
该样式仅仅包含了面板样式的内容部分，而没有加入头部，适用于不需要头部的面板内容。

Bootstrap面板带标题样式

上面提到的面板样式是没有带标题的，在一些情况下不够用，所以Bootstrap面板还提供了带有标题的面板样式，让我们看看应该怎么去使用：

<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板标题</h3> </div> <div class="panel-body"> 面板内容 </div> </div>
上面这一部分代码是最为标准的带有标题的面板结构，为了适应阅读设备以及SEO搜索引擎优化元素，最好将标题放入h1-h5的标签中。

Bootstrap面板带注脚样式

如果一些解释说明类的文字无法在面板标题很好地表现出来，可以通过注脚的形式来进行说明，Bootstrap面板同样提供了注脚这个样式：

<div class="panel panel-default"> <div class="panel-body"> 面板内容 </div> <div class="panel-footer">面板注脚</div> </div>
通过主次关系来进行标题或者是注脚的选择，是用好面板组件的关键。

Bootstrap面板有意义的样式

和其他Bootstrap组件一样，Bootstrap面板样式同样具有有意义的样式，通过引用这几个样式可以将该面板的作用直观展现出来，同样也是那几种颜色和样式名称：

<div class="panel panel-primary">主要面板样式</div> <div class="panel panel-success">成功面板样式</div> <div class="panel panel-info">信息面板样式</div> <div class="panel panel-warning">警告面板样式</div> <div class="panel panel-danger">危险面板样式</div>
Bootstrap面板与表格结合

如果你需要在面板中引入表格样式，那么也可以很方便地实现：

<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <table class="table"> 表格内容 </table> </div>
Bootstrap面板与列表结合

就像开头所说的一样，如果你想要在面板中引入列表，那也真是再合适不过了，通过以下代码便可轻松实现：

<div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body"> <p>面板内容简介</p> </div> <ul class="list-group"> <li class="list-group-item">列表项目1</li> <li class="list-group-item">列表项目2</li> <li class="list-group-item">列表项目3</li> <li class="list-group-item">列表项目4</li> <li class="list-group-item">列表项目5</li> </ul> </div>

‘肆’ 什么是bootstrap方法

网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

‘伍’ 如何使用Bootstrap快速开发Web前端

如何使用Bootstrap针对 Bootstrap 的 HTML清单 • 是一个有用的框架 HTML 文件，用于结合使用 Bootstrap 与一个固定布局和响应特性：清单 • 用于 Bootstrap 项目的基本框架 HTML 文件 (listing1.html)

在 Bootstrap 下载中，请注意，每个 CSS 和 JavaScript 文件有两个版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一种形式是一个常规文件，第二种形式是压缩文件或 “缩小文件”。就像在本文中一样，使用缩小版本即可实现最有效的页面加载。
listing1.html 的开始之处的 DOCTYPE 声明将其标记为一个 HTML5 文件。head 元素内的 meta标记控制移动的小屏幕布局。(为方便起见，我将它们称作 meta/viewport 标记。)默认情况下，大多数移动设备按比例缩小 Web 页面，使之适应屏幕大小，就像在桌面浏览器窗口中一样。这就是为什么许多网站上的文本和图像在手机浏览器中看起来很小的原因。meta/viewport 声明中的 initial-scale=1.0 部分禁用了这一行为，告诉设备要保持页面的原有尺寸。该声明表示 Web 设计人员(在本例中为 Bootstrap)已经完成了实现较小屏幕的响应式设计这一任务，所以在默认情况下，没必要采用蛮力方法。
稍后，清单 1 的 head 标记是 Bootstrap CSS 的链接。在文件的末尾，加载 jQuery 和 Bootstrap 实用程序 JavaScript。这些脚本在末尾运行可实现最佳性能。
设置代码
当使用 Bootstrap(或任何 Web 支持文件集)时，您可以从多种方法中选择用来设置 HTML 和其他代码的方法。我建议您创建一个文件夹来存储自己的项目，然后将 Bootstrap 文件及其完整的文件夹结构复制到项目文件夹中。将您自己的 HTML 文件放在最顶层，并将您自己的 CSS、JavaScript 和图像文件放在相应的 Bootstrap 子文件夹中(这些文件夹的名称分别为 css、js 和 img)。然后，整体结构如下所示：

CSS 设备调整
meta/viewport 标记是当前的约定，用于将页面调整为设备的可视浏览器空间。万维网联盟 (World Wide Web Consortium, W3C) 正在准备一种替换机制，该机制以一种新的 CSS 规则的形式出现(参见 参考资料)。清单 1 中 meta/viewport 声明的等效 CSS 是：

目前，您可以将这个代码包含在您的 CSS 中，并在 HTML 中保留 meta/viewport 标记。当 CSS 形式受到广泛支持时，您就可以删除meta/viewport 声明。