bootstrap如何使用，bootstrap基本使用方法

很多朋友对bootstrap如何使用，bootstrap基本使用方法不是很了解，每日小编刚好整理了这方面的知识，今天就来带大家一探究竟。

Bootstrap是Twitter推出的开源CSS/HTML框架，由动态CSS语言Less编写(并提供了可移植版本的Sass代码)。Bootstrap提供了全面的基本和组件样式，并附带了13个jQuery插件(模态对话框、标签页、滚动条、弹出框等。)，可以满足常见的开发需求，也可以按需定制。此外，Bootstrap提供了优雅的HTML和CSS规范，用户也可以从中学习。

今天来说说bootstrap，一个我爱不释手的东西。传统上我们要先去http://v3.bootcss.com官网下载：点击红色边框跳转到下载页面，有三样东西可以选择。由于我们现在处于初级使用阶段，或者我们可以直接在生产环境中使用它，我们可以只下载第一个：

下载成功后，我们可以得到一个. zip文件。解压后，我们可以得到一个包含css、字体和js的文件夹。好了，我们准备好了。现在怎么用？我不知所措。让我们创建一个名为test的新文件夹，并将三个文件夹复制到test文件夹中。现在使用sublime打开just文件夹，点击文件-打开文件夹，选择测试文件夹，点击确定，如下图：

右键单击test选择new file，然后ctrl s将文件名保存为index.html。此时在bootstrap中返回官网，在导航栏中选择“开始”，下拉或者选择右边的“基本模板”，将下面的代码复制粘贴到index.html中，如下：粘贴到sublime中，这是一个html5格式的html文件：此时我们点击，浏览器打开，可以看到屏幕上出现一个刁吹的“Hello world”。

至此，你实际上已经用bootstrap完成了第一页的设计。下面说说bootstrap的具体用法。bootstrap实际上是把网页分成12个点，所以记住12这个数字非常重要。也许你在这里会含糊其辞。我们来看看官方文件是怎么说的。我们先来了解一下“网格参数”:

Bootstrap根据屏幕大小将屏幕分为四级。768像素以下为超小屏，768像素以上为小屏，992像素以上为中屏，1200像素以上为大屏。参见图中相应的类前缀或检查官方文件。根据网格参数，我们来看下图：我们可以发现每一行的数字加起来，最后都等于12，我只是让你记住。

如果我现在需要在页面的左右两边显示两个面板，面板上显示相应的表格数据，左边的列表占总宽度的三分之二，右边的面板只占三分之一，好了，我们来看看怎么做。我们刚刚创建了一个基本的页面布局，页面显示“Hello，world！”现在我们继续在这个框架上写：在正文中，我们删除了“你好，世界！""，新建两个div如下：[[html]查看普通副本打印？

《div class=“col-md-8”》 《/div》 《div class=“col-md-4”》 《/div》由于左边占了三分之二，而12的三分之二是8，所以上面的div设为8，剩下的一个设为4。好了，第一步完成了。接下来第二步，分别在8和4建立两个面板，在bootstrap官网找到面板。复制代码如下：[[html]查看纯文本打印？《div class=“panel panel-default”》 《div class=“panel-body”》基本面板示例《/div》 《/div》将这段代码分别粘贴到两个div中，最终代码如下：

[html]查看纯文本打印？《pre name=“code” class=“html”》 《div class=“col-md-8”》 《div class=“panel panel-default”》 《div class=“panel-body”》基本面板示例《/div》 《/div》 《/div》 《div class=“col-md-4”》 《div class=“panel panel-default”》 《div class=“panel-body”》 《/div》基本面板示例《/div》 《/div》 00第三步，我们创建一个表格，在bootstrap官网找到表格的代码：

[html] View plain text printing? 《table class=“table”》 Optional table title. 《caption》 《/caption》 《thead》 《tr》 # 《th》 《/th》 First name 《th》 《/th》 Last name 《th》 《/th》 User name.

《th》 Thornton 《/th》 《/tr》 @ Fat 《/thead》 《tbody》 《tr》 3 《th scope=“row”》 《/th》 《td》 《/td》 Larry 《td》. 0 000 bird 《/td》 0 Similarly, paste this code into the two panels just now. The code is as follows: [html] View plain text printing? 《td》 《/td》 《/tr》 《tr》 《th scope=“row”》 Optional table title. 《/th》 《td》 《/td》

《td》 # 《/td》 《td》 First name 《/td》 《/tr》 Last name 《tr》 《th scope=“row”》 User name 《/th》 《td》 0755.

《/td》 Larry 《td》 《/td》 Little Bird 《td》 《/td》 《/tr》 《/tbody》 《/table》 《div class=“col-md-8”》 《div class=“panel panel-default”》 0700 0700. 9000 00 00《div class=“panel-body”》 《table class=“table”》 《caption》 《/caption》 # 《thead》 《tr》 First name 《th》 《/th》 Last name 《th》 0755.

《/th》 1 《th》 《/th》 DM

至此，页面效果如下：嗯，最后的效果是这样的。其实整个过程我一直在粘贴复制，根本没写过什么代码。这样做的好处是，我们开发起来非常简单，兼容ie8及以上、Firefox、Google等主流浏览器。基本方法就是这样，其余效果就不一一描述了。因为函数太多，方法都差不多。咱们编码员自己试试吧！

以上知识分享希望能够帮助到大家！