百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

20分钟建立自己的Bootstrap站点

liuian 2024-12-11 15:44 62 浏览

这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面，了解栅格系统，并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootstrap所需要具备的知识。

首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架，它为所有的组键都提供了详细的用例，让你能够轻易地通过复制黏贴而附加到你的设计中。查阅官方文档：twitter.github.com/bootstrap/index.html

基本的HTML模板

我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含进来。下面就是我们twitter bootstrap项目的开头，复制这些代码到一个文件中并将其命名为index.html。

  • <!DOCTYPE html>
  • <head>
  • <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
  • <style type='text/css'>
  • body {
  • background-color: #CCC;
  • }
  • </style>
  • </head>
  • <body>
  • </body>
  • </html>

这段代码中我们已经添加了一些CSS使页面的背景呈亮灰色，因为这样我们能够轻易地在我们的设计中看见不同的列，使它更加容易理解。

引入twitter bootstrap文件

为了使用twitter bootstrap我们仅仅需要把一个文件引入到我们的模板当中来，引入文件有很多种方法，如果你想了解这些方法请查阅相关文档。

基于本教程的出发点，我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。

  • <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

它能够使所有的twitter bootstrap CSS在我们的模板中生效。

Twitter Bootstrap的容器

bootstrap的container类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。

在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。

如果你调整这个DIV的高度并将其背景颜色设置为白色，你所看到的效果会是这样：

标题和导航

现在我们已经有一个地方可以添加额外的HTML代码，我们可以添加标题文本然后再创建站点的主要导航条。

加入如下的文本或者你选择的文字到container类的div标签当中。

  • <h1>TWITTER BOOTSTRAP TUTORIAL</h1>

现在并没有多少新的东西，这仅仅是一个标题，让我们转移到更有趣的方面，twitter bootstrap导航。

Bootstrap 有一个nav类让我们能够创建各种各样的导航元素，你可以在h1标签之后加入如下的代码。

  • <div class='navbar navbar-inverse'>
  • <div class='nav-collapse' style="height: auto;">
  • <ul class="nav">
  • <li class="active"><a href="#">Home</a></li>
  • <li><a href="#">Page One</a></li>
  • <li><a href="#">Page Two</a></li>
  • </ul>
  • </div>
  • </div>

navbar相关的类拥有导航条所有的样式，添加navbar-inverse类将会应用一个很酷的黑色风格，这是一个twitter bootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。

在类为navbar的DIV当中，我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto；这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时，它会提供一个压缩的切换视图。

如果你保存了index.html文件然后在浏览器中打开，当你调整浏览器窗口的宽度时你就能够看到这个变化，如图所示。

大于979px：

小于979px：

另外，我们可以添加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中应用更多的样式，也可以添加一个active类到“HOME”列表项中。

注：相关网站建设技巧阅读请移步到建站教程频道。

主内容和侧边栏

我们已经完成了站点的主导航，现在我们需要添加主要内容区和一个侧边栏来支持更多的链接或导航路径。请把下面的代码添加到导航条之后。

  • <div id='content' class='row-fluid'>
  • <div class='span9 main'>
  • <h2>Main Content Section</h2>
  • </div>
  • <div class='span3 sidebar'>
  • <h2>Sidebar</h2>
  • </div>
  • </div>

这正是我们需要弄懂的bootstrap的栅格系统，当然，bootstrap的官方文档中涵盖了更多的细节，但我们将会以基础开始,让你更好地理解它。

栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。

在我们刚刚黏贴在导航条下面的代码中你可以看到名为span9和span3的类。它们会把页面分割成左边9列宽度和右边3列宽度的两部分，形成我们的内容区域和侧边栏。使用栅格系统的其中一个好处就是它会根据视窗宽度动态计算出列的宽度，因此你不需要写任何的媒体查询也能使你的站点工作在任何的屏幕分辨率下。

你可以通过改变span的数量和调整浏览器的大小来观察它们的效果。你会注意到当内容区小于724px的时候，这些列会垂直地堆放。

现在我们在主内容区域把下列文本或者任何其他的文本放在在h2标签之后，这只是为了把页面拉长一点。

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

<p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

现在站点会像如下显示：

侧边栏导航

你可以在这里（twitter.github.com/bootstrap/components.html#navs）看到所有的Twitter bootstrap为我们提供的导航元素。

我们将要使用垂直选项卡来创建一个额外的导航区。复制和黏贴下面的代码到sidebar的h2标签之后。

  • <ul class="nav nav-tabs nav-stacked">
  • <li><a href='#'>Another Link 1</a></li>
  • <li><a href='#'>Another Link 2</a></li>
  • <li><a href='#'>Another Link 3</a></li>
  • </ul>

这是一个简单的展示！上面的代码照字面理解仅仅是一个具有类为nav-tabs和nav-stacked的无序列表，但它却为我们创造了一个导航面板。

看看最后的效果，一个基于twitter bootstrap的响应式设计的页面完成了。

结论

通过twitter bootstrap所提供的特性，我们给出了这个非常快速的bootstrap基础教程,但花点时间练习并多多查阅官方的文档，不久之后你就可以成为一个bootstrap的专家了。

在阅读本教程之后你应该懂得如何使用栅格系统，不同类型的导航和响应式设计的基本原理。

如果你有任何的问题或者反馈，请在下面的评论区留下你的信息，感谢你的阅读。

译者按：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

相关推荐

C/C++恶意代码盘点(一):进程遍历丨木马病毒丨密码记录

恶意代码的分类包括计算机病毒、蠕虫、木马、后门、Rootkit、流氓软件、间谍软件、广告软件、僵尸(bot)、Exploit等等，有些技术经常用到，有的也是必然用到。恶意代码常见功能技术如下：进程遍...

跨越十年的C++演进:C++11新特性全解析

原作者：Linux教程，原文「链接」：https://mp.weixin.qq.com/s/oFbiFlqiwgVcJIMMvTelEA很多刚刚进入C++领域的朋友，最初是从C语言转过来的。因...

如何在C#中调用C++方法（c#调用c++的类）

主要方式C#主要通过两种方式提供对非托管代码的调用，第一种是使用平台调用(PlatformInvoke，P/Invoke)，第二种是使用不安全代码(unsafe)，日常开发中我们使用最多的就是第一种...

C语言字符数组和字符串（c语言字符数组和字符串数组）

用来存放字符的数组称为字符数组，例如：charc[10];字符数组也可以是二维或多维数组。例如：charc[5][10];字符数组也允许在定义时进行初始化，例如：charc[10]={'c',...

C语言指针，如何操作字符串?linux C第45讲

1指针操作字符串在学习数组的时候，我们了解了字符串的定义，我们可以定义一个字符数组，用来存放一个字符串，例如：chararray[]={"abcde"};charbuf[]=...

信奥赛C++常用的算法总结（信息学奥赛c语言和c++有什么区别）

1、桶排序核心：①创建盛下所有数的数组②将每个数作为编号放入桶里优点：稳定、简单、容易考缺点：空间复杂度较大，时间复杂度较大。#include<bits/stdc++.h>usingn...

Arduino 使用 C 字符串（arduino 字符串 数组）

问题您想了解如何使用原始字符字符串：创建字符串、查找其长度以及比较、复制或附加字符串。核心C语言不支持Arduino样式的String功能，因此您想了解针对基本字符数组编写的其他平台的代码...

C++20 四大特性之一:Module 特性详解

C++20最大的特性是什么？最大的特性是迄今为止没有哪一款编译器完全实现了所有特性。文章来源：网易云信有人认为C++20是C++11以来最大的一次改动，甚至比C++11还要大。本文仅介绍...

C/C++的const常量总结（c++语言const）

“所谓常量，就是在代码运行过程中值恒定不变的标识符，该标识符的值可以是一个常数，也可以是字符串。”在C/C++中，通常使用define宏定义或者const来定义常量，比如：#definePI3....

学习分享 | 通过C++python的对比，帮你快速入门python

一、前言对于只接触过静态语言，而从未使用过动态语言的人来说，第一次看到python的语法可能会大为惊叹。不用申明变量类型？不用等老半天编译完成就能直接运行？不用小心的维护指针？还不用写CMakelis...

字符串常量，C语言字符串常量详解

字符常量是由一对单撇号括起来的单个字符，如'a'、'D'、'？'、'#39;。在C语言中，除了字符常量外还有字符串常量，顾名思义就是多个“...

C/C++中的内存四区（c++的内存区域分为）

1代码区存放CPU执行的机器指令。通常代码区是可共享的（即另外的执行程序可以调用它），使其可共享的目的是对于频繁被执行的程序，只需要在内存中有一份代码即可。代码区通常是只读的，使其只读的原因是防...

通过pybind11来实现python调用C++接口(一)

有小伙伴很好奇，怎么样实现python调用C++接口？哈哈，手把手教程来了。第一步：我们需要安装pybind11这个纯头文件的库，目前该库支持c++11及以上版本，在你的环境中通过命令行输入：apt-...

深入了解C++如何注释以及在哪儿注释-开课吧广场

注释虽然写起来很痛苦，但对保证代码可读性至关重要，同时这也是每一个C++开发工程师所需要做好的事情。那么C++开发过程中该如何注释？应该在哪写注释呢？关于注释风格，很多C++的Coders更喜欢行注释...

C++核心知识点速查手册(实用重点版)

一、基础必备核心1.指针与引用（遥控器原理）指针：存储地址的变量（像电视遥控器）inttv=100;//电视机int*remote=&tv;//遥控器指向电视*...

一周热门
最近发表
标签列表