频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
BootStrap快速上手
2016-12-13 09:34:57         来源:I_intern的博客  
收藏   我要投稿

简介

BootStrap是什么

BootStrap是基于HTML、CSSJavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端界面,它是后端程序员的福音,使他们只需要专注业务逻辑,而无须浪费太多的精力在界面设计上。

全响应

它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容,所有的元素都可以很优雅的呈现,减轻了因为兼容性而带来的工作量。

版本

它的最新版本是4.0,国内目前用的较多的是3.x,本教程也基于BootStrap3.x版本

二次开发

你可以使用默认的BootStrap样式、组件和插件,你也可以对其进行二次开发,甚至你还可以基于BootStrap环境使用自己开发的组件。

下载

如果你想把BootStrap文件放在项目中供本地使用,那么首先你要下载它,那么在哪可以下载到BootStrap文件呢?

下载完整版

你可以登陆https://v3.bootcss.com 点击页面中的下载BootStrap按钮下载完整版。

按需下载

如果你感觉整个BootStrap文件有些大的话,你也可按需定制你所需要的部分。 你可以访问https://v3.bootcss.com/customize/ 在线定制css、组件、javascript插件

使用本地BootStrap文件

如果你想稳定的使用BootStrap(不会因为断网而无法使用),那么,我建议你还是把它下载下来,放在本地项目中使用它。在本地使用它很简单。

1.首先把它的文件按照类别放在项目的文件夹中

你可以把CSS文件——bootstrap.min.css放在类似stylesheets这样专门放CSS的文件夹。把js文件——bootstrap.min.js放在类似Scripts文件夹中。当然,最终如何部署可以按照你的个人喜好。

2.在页面中使用BootStrap

将BootStrap的文件bootstrap.min.css、bootstrap.min.js引入当前页面中,由于BootStrap是基于Jquery的,所以在引入它的js文件之前,一定要先引入Jquery.js。注意:这里考虑到文件大小,我们引入了min版的文件,当然,你也可以引入完整版的文件。

示例代码如下

<!-- Bootstrap 核心 CSS 文件 --></p>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>

<!-- Bootstrap 核心 JavaScript 文件 -->
<p><script src="/scripts/bootstrap.min.js"></script>

使用BootStrap CDN

如果你对你的网路环境很有信心,而又不想费事下载BootStrap,那么,你可以使用互联网上提供的CDN服务。示例代码如下:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootStrap栅格布局

在项目中使用BootStrap的第一步该怎么做呢?首先,你需要弄清楚一个问题——栅格布局

BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分,在具体的DIV中,可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度。如:

<p class="row“><!--表示另起一行-->
  <p class="col-md-8"></p>
  <p class="col-md-4"></p>
  </p>

在第一个DIV中class=”col-md-8”,第二个DIV中class=”col-md-4”, 其中‘8’和‘4’就是其DIV所占屏幕宽度的数值,加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。 注:在上述代码中为了突显区块,我们设置了DIV的边框宽度为1像素黑色实线,高度设为100像素。

布局屏幕分类

前面说过,BootStrap是一种全响应的技术,那么针对不同的屏幕,它是怎么提供支持的呢? 别担心,针对不同的显示屏幕尺寸,BootStrap提供了不同的栅格布局的属性:

col-xs-* 超小屏幕 手机 (<768px)
col-sm-* 小屏幕 平板 (≥768px)
col-md-* 中等屏幕 桌面显示器 (≥992px)
col-lg-* 大屏幕 大桌面显示器 (≥1200px)

多个布局属性

如果想让一个DIV在不同的屏幕中占有不同的屏宽该怎么做呢? BootStrap允许我们在一个DIV中写多个类别的布局属性,从而让该DIV在不同的屏幕中呈现不同的屏宽。如:

  <p class="row">
  <p class="col-md-8 col-xs-6 col-lg-4"></p>
  </p>

该DIV在中等屏幕中占有‘8/12’,在手机中占有‘6/12’,在大屏幕中占有屏幕比例的‘4/12’。

获得BootStrap资源

你可以登陆BootStrap中文网 (本课程所有原生的BootStrap代码都来源于这里),获取所有的BootStrap资源,包括基本的CSS、组件、JavaScript插件等,当然你也可以通过汇智网的BootStrap课程学习掌握它们的使用。

点击复制链接 与好友分享!回本站首页
相关TAG标签 BootStrap快速上手
上一篇:形状属性
下一篇:sublimetext3gb2312编码文件显示乱码,ConvertToUTF8转码失效
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站