Bootstrap 2.3.2:入门指南

Twitter Bootstrap徽标

引导程序是 CSS框架 在整个网络中变得非常流行。 他们的风格 响应 在社交网络上看到 Tuenti y Twitter。 使用此功能为我们节省了开发Web应用程序的时间,因为它节省了我们创建适用于所有设备的干净页面样式所需的所有工作和精力。 咨询此框架中使用的样式,我们将意识到它们是我们熟悉的,因为今天许多网站已经实现了它。

结构

引导结构图

自举流体结构

为了通过手机和平板电脑访问我们的网站,我们将不得不使用Bootstrap为我们提供的流畅结构。 这种结构的使用非常简单,一切都基于元素 跨度 这对我们有帮助 布局 我们的网页设计。 稍后,当我们从 智能手机 o 良好,这将自动适应所述设备,从而大大提高了导航质量。 我们将使用 跨度 在流体结构内具有逻辑划分的类,即:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

其中数字2表示跨度的大小。 每行包含足够的空间来容纳大小为12的1个跨度或大小为2的6个跨度。您可以根据自己的喜好分配此空间。 超过一行的空间后,它将自动向下移至下一行,从而允许我们使用 跨度 大小12以创建换行符。 如果我们想跳过一些 跨度 创建一个时,即从4开始 跨度,并应用大小为3的代码,我们将使用以下代码:

<div class="span2 offset4">Contenido</div>

这使该部门可以跳四 跨度 在显示内容之前。 我们可以随意使用它,而跳过我们想要的代码。

使用offset类跳过跨度

使用offset类跳过跨度

每个设备的设计不同

具有Bootstrap设备专有类的图像

CSS类以区分每个设备

为了对每种类型的设备应用不同的设计,我们将使用以下类来告诉每个逻辑分区其面向的设备:

这样,我们可以为每个具有相同URL的设备展示完全不同的设计。

按钮

颜色按钮

Bootstrap提供的按钮列表

Bootstrap为我们提供了干净的彩色按钮,其使用非常简单:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

哪里 btn btn-success 指的是按钮的颜色,要进行更改,只需用上图中显示的类替换它即可。

安装引导程序

对于此CSS框架的安装,我们将从文章结尾处留下的链接中下载zip文件,并编写以下代码 在我们的HTML文件的开头.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

一旦确定CSS和JS文件与HTML文件位于同一文件夹中,就可以开始设计响应式网站。

更多信息 - 表格验证

下载 - 引导程序:CSS框架


发表评论,留下您的评论

发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   亚历杭德拉

    您没有关于此框架的更多教程?