怎样使用 Bootstrap.pdfVIP

如何使⽤ Bootstrap Bootstrap提供了⼏种可以帮你快速上⼿的⽅式，每种⽅式针对具有不同技能等级的 开发者 不同的使⽤场景。先去它的官网进行下载 ： 点击红线边框处 可跳转到下载页面 ，有三个东西可以给我们选择 ，由于我们 现在处于初级使用阶段 ，或者说我们直接用在生成环境下 ，我们下载第一个就 好 ： 下载成功后可以得到一个.zip的文件 ，解压后我们可以得到一个包含css、fonts 和js的文件夹 ，ok ，准备工作我们就做好了。 现在要怎么用呢 ，一头雾水吧 ，我们新建一个文件夹 ，命名为test ，将刚刚三个 文件夹复制到test文件夹中 ，现在用sublime打开刚刚的文件夹 ，点击file-open folder ，选择test文件夹点击确定 可 ，如下 ： 在test上右键选择new file ，然后ctrl+s保存文件名为index.html ，这时候回到 bootstrap的官网 ，导航栏选择 “起步” ，向下拖动或在右侧选择 “基本模 板” ，将下列代码进行复制 ，粘贴到index.html中 ，如下 ： 粘贴到sublime中 ，这是一个html5格式的html文件 ： 这时候我们点击index.html ，浏览器打开后就可以在屏幕上看到一个Diao炸天 的 “Hello world”了。 到这里 ，其实你已经用bootstrap完成了第一个页面设计了。下面来具体说下 bootstrap的具体使用方法 ，bootstrap其实是把网页等分为了12分 ，所以记住 12这个数字是很重要的 ，可能这里你会比较模糊 ，下面我们来看下官方文档是 怎么说的 ，我们先来了解一下 “栅格参数” ： bootstrap把根据屏幕大小把屏幕分为了4个层级 ，小于768像素的为超小屏 幕 ，大于等于768像素的为小屏幕 ，大于等于992像素的为中等屏幕 ，大于等于 1200像素的则为大屏幕 ，相应的类前缀见图或查看官方文档 ，根据栅格参数 ， 我们看下下面这幅图 ： 我们可以发现 ，每行的数字全部相加 ，最终都等于刚刚我让大家记住的12 ，可 能大家还是不清楚 ，我们下面用一个例子来会说明 ： 如果我现在需要在页面上左右分别显示两个面板 ，面板上面显示相应的表格数 据 ，且左侧列表占总宽度的3分之2 ，右侧的面板仅占3分之1 ，OK ，下面我们来 看看怎么做。 我们刚刚已经创建好了一个基本的页面布局 ，页面上显示了 “你好 ，世 界 ！” ，现在我们在这个框架上面接着写 ： 在body中 ，我们删除刚刚的 “你好 ，世界 ！” ，新建两个div ，如下 ： div class=col-md-8/div div class=col-md-4 /div 由于左侧占⽤3分之2 ，12的3分之2为8 ，所以上⾯⼀个div设置为8 ，剩下的⼀个设为 4 ，好了，第⼀步完成了。 下⾯进⾏第⼆步，分 在8和4⾥⾯建⽴两个⾯板，在bootstrap官⽹找到⾯板，复制代 码如下： [html] view plain cop div class=panel panel-default div class=panel-bod Basic panel example /div /div 将这段代码分 粘贴到两个div下，最终代码如下： [html] view plain cop pre name=code class=html div class=col-md-8 div class=panel panel-default div class=panel-bod Basic panel example /div /div /div div class=col-md-4 div class=panel panel-default div class=panel-bod Basic panel example /div /div /div 这时候页⾯显⽰效果如下： 我们可以看到左侧的panel 占据了页⾯的3分之2 ，右侧的仅为3分之1，第⼆步也完成 了。 第三步，我们来创建表格，在bootstrap官⽹找到表格的代码： [html] view plain