Bootstrap字体图标,大概占40%的项目使用了顶部工

作者:mgm娱乐

标签,这标签包含一个必须的class为“top-bar”

Zurb开发的第5版本Foundation使得顶部工具栏表现为非常突出,出色的顶部工具栏差不多成为一个由Foundation搭建起来网站的象征元素。今天我们将学习如何通过不同方式去实现它,把它放置在页面的其他地方,让你拥有自定义样式和响应式的水平导航菜单。

、默认的导航栏

为了实现顶部工具栏,我们需要一个

好的,我们将编写header、导航、主内容和footer区域的内容,我们将给每个区域都添加class="full-width",然后再添加一个块元素

添加 class .list-group。

里面添加一个

,块元素里面再添加一个块元素

A、添加一个带有 class .progress 的

TopBarTitle

Menu

添加父链接

添加父链接是我们接下来要做的,关闭之前需要添加一个

标签,在这个section中需要添加一个无序列表。

在这里,依然允许你使用“divider”来区分列表,可参考下面的代码示例:

MainItem1

MainItem2

从代码中注意到,

中有个class为left,用来控制在左侧显示导航内容。甚至可以添加两个菜单链接,左右(class="right")显示导航内容。

到目前为止,我们所添加的代码可以水平地显示在顶部工具栏上,在小屏幕的设备上,将会变成一个下来菜单,点一下“MENU”或者“三横”按钮就可以显示出来。

添加子菜单

每个li项可以内嵌一个无序列表作为子菜单。为了实现这个功能,父链接必须添加一个class为has-dropdown,内嵌的ul必须添加class为dropdown:

MainItem3

DropdownLevel3Label

DropdownLevel3a

DropdownLevel3b

DropdownLevel3c

备注:为了标记当前链接处于激活状态,可以添加active。

子菜单在大屏幕下显示为标准的下拉菜单,而在小屏幕则显示为“滑动块”。

附加设置

尽管被叫为“顶部”栏,其实你可以放置在你的布局任何地方。如果你想固定住这“顶部”栏,就需要添加一个div,并添加class为“fixed”,来包含顶部工具栏。再或者,你可以添加class“contain-to-grid”在主容器中来控制顶部工具栏的宽度,更方便的是,可以同时使用两者。

假设你想顶部工具栏居于布局中间,当用户向下滚动的时候,并固定在页面的顶部,这时可同时使用class“contain-to-grid”和“sticky”。

添加一个搜索输入框

如果这些功能还不能满足你,你可能还需要一个输入框来作为搜索功能、邮箱注册功能、或者其他内容。我们需要在菜单列表项中添加一个带有 class“has-form”的li。见下面的代码,我们在顶部工具栏中运用了网格功能。这使得很容易去布局元素——当然也能响应式,因为网格的列在小 屏幕上发生转变。

面包屑导航

面包屑导航在CMS系统页面中是很常见的,例如WordPress,其中一些多层次的页面在使用起来有点复杂。在任何一个基于Foundation的项目中使用面包屑导航是很容易的,在

  • Home
  • Features

搭起HTML结构

19、Bootstrap 面板

这章我们要学的是foundation之顶部工具栏。Foundation的顶部工具栏是一个非常小巧有用的组件,但不是意味着在你的工程中就一定要使用它。我估计,在使用Foundation来开发 过的项目中,大概占40%的项目使用了顶部工具栏。你该认真分析项目需求来决定是否应该使用顶部工具栏;顶部工具栏组件是很容易改变样式的,但是交互功能 就比较固定了。

第一步:常用的模板

代替

备注:如果你只想显示“MENU”或者“三横”,就可以去掉menu-icon,或者是标签内容“Menu”。

index.html文件里面已经预包含一些HTML代码。你可以保留

面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

基本架构

,这也就是搭起基本的网格结构。

18、Bootstrap 列表组

  • ,其中一个
  • 来显示这个菜单的标题或者logo。

里面的代码,也可以保留所有的脚本链接。保留这些来确保Foundation的网格系统和顶部工具栏可以运行起来。

为了创建一个带有黑色背景白色文本的倒置的导航栏,只需要简单地向 .navbar class 添加 .navbar-inverse class 即可,如下面的实例所示:

接着在

首先我们将需要最新版本的Foundation。解压源码包并且把所有的文件放置在你的工程或者测试目录下。我们将直接使用index.html文件,创建一个style.css样式文件将用来重写顶部工具栏的样式来达到自定义导航栏效果。

12、Bootstrap 超大屏幕

你可以删掉其他内容代码,我们将采用一种全部宽度的设计,这不是很复杂的,只是需要想到更好的办法来处理它。

  • Home
  • SVN
  • iOS
  • VB.Net
  • Java
  • PHP

Foundation-4CustomTopBar

Loremipsumdolorsitamet,consecteturadipisicingelit.Harum,asperiores,voluptas,veniamcommodiimpeditteneturdolorescumquefacereexplicaboessequaeratveritatislaboriosameiusmodiametmaximenonofficianemo?Iste,quisquam,voluptatum,dolornamreiciendisundealiquamnumquamnecessitatibusodioetperspiciatisfacerenihilinventoreullamaspernaturcorporisveritatisquiadolorum?Sed,hic,eosquisquibusdameumautoptiorepudiandaeat!Eligendi,nequerationealiasenimquaemagnamdoloresessepariaturearumlaborumreiciendisnobissuntsequisapienteducimusiureipsam.Sapiente,minima,rerum,facerequossaepepariaturmagnidoloremcumametnemoquislaborumipsadignissimosducimusinventoremodiremcumquequibusdamquamasperiores!Optio,nobissuscipitmolestiasvoluptasveritatisaspernaturaccusamusexcepturiremquaeratimpeditanimivoluptateatfacilisaliquidcumfugitlaboreomnisprovidentrecusandaeautem.Doloribus,mollitiaquosofficiisquassapientenamdolorpraesentiummaximecupiditateillum?Rem,esse,nullavitaeadipiscisequidelenitiquasi!

©2014

第二步:顶部工具栏标记

在编写样式之前,我们需要编写出一些必须的HTML结构代码使得Foundation顶部工具栏能够正确地运行起来。因此需要5样基础元素使得引擎跑起来。

= 为了增强在手机布局上的菜单。

现在我们用这5样基础元素来搭建基础框架并且实现功能。

备注:在此教程例子中,我们将创建一个自定义的导航菜单,因此删除一些包括logo、文本和图片的标题。因此从下面代码例子可以看到在块元素

里的

里面是空的。

接着,我们来添加一些菜单元素和一个下拉菜单代码,在你想添加下拉菜单的li元素里添加class="has-dropdown",然后在里面包含下拉菜单代码

。如果想表示当前使用状态的li,则需要添加”active”。

Menu

Home

Aboutus

Ourproducts

Portfolio

Blog

Prices

Features

Modalboxes

Submenu'sandnavigation

Pricetables

Buttons

Buttongroups

Labels,KeystrokesandTooltips

Alertboxes

Columns

Contact

第三步:目前效果

现在可以在你的浏览器上看到目前的效果,基于Foundation框架使用顶部工具栏我们已经创建一个水平菜单。为了方便把菜单放置到其他地方,而不是固定在浏览器的顶部,我们需要在以上代码外层添加网格的

当你在调整浏览器窗口时,会发现菜单栏在预先设定的断点发生改变。

接下来着手编写自定义样式,将关注如何去编写顶部工具栏的样式和可以使用哪些class。

编写CSS

第一步:通用样式

如果你还没做好准备,可以创建一个css文件,命名为style.css并且放置到下载下来的Foundation工程下css文件夹下。但别忘记把此引用到index.html文件里。如下代码示例:

Foundation4

这里如果你不把style.css放置在foundation.css下面,将不会覆盖原来顶部工具栏的样式。

很好,接下来我们要为header、导航、内容和footer写一些基础样式,如导航块,我们将添加一张已经下载好的背景图。这些通用样式一般不是很难去实现的,见如下代码示例,我们添加一个class”full-width”到每个区域中,以致于每个区域的宽度都是占满浏览器宽度的。

background-color:#ccc;

/**Setthebackgroundsforthedifferentsections**/

.header-area{

background-color:#2d465c;

min-height:160px;

.navigation-area{

background-image:url('../img/navigation-container.jpg');

background-repeat:repeat-x;

.content-area{

padding:50px070px0;

.footer-area{

background-color:#1f1f1f;

color:#fff;

min-height:50px;

padding:20px000;

.full-width{

min-width:100%;

position:relative;

color:#fff;

font-weight:normal;

margin-top:50px;

第二部:顶部工具栏样式

现在看一下效果,会发现菜单会往外偏移一点,原因就是使用默认的样式,接下来修复这个问题!

有一些样式类是需要修改以达到想要的效果。首先,我们将在.top-bar和.top-bar-section li里移除黑背景,改变height和line-height为58px。如下代码,可看注释帮助理解。

/**Changesbackgroundcolor,heightandmarginoftheborder**/

background:none;

height:58px;

line-height:58px;

margin-bottom:0;

/**Removesblackbackgroundonmenubar**/

.top-bar-sectionul{

background:none;

text-transform:uppercase;

/**Removesblackbackgroundonmenuitem**/

.top-bar-sectionlia:not{

background:none;

line-height:58px;

padding:027px;

我们已经移除黑背景了,并且适应高度、行高和内边距,将文字转化为大写字母,这些都是为了适应我们自定义设计。

如果你进行刷新页面,可以看到出现雏形了,我们继续编写下拉菜单、菜单子项目、激活的状态的样式吧。继续往下看代码示例,并阅读注释:

/**Changestheactivemenuitemfromdefaultblacktoagradient**/

.top-bar-sectionulli.active>a{

background:rgb;

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesthehoverstateofnonactivemenuitems**/

.top-bar-sectionli:hovera{

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesnonactivemenuitemstextcolortoblack**/

.top-bar-sectionulli>a{

color:#2d2d2d;

/**Changesthehoverstateofdropdownmenuitems**/

.top-bar-sectionul.dropdownlia:hover:not{

background:nonerepeatscroll00rgba;

/**IMPORTANTfillfortheuldropdowncontainer**/

.top-bar-sectionul.dropdown{

background:#333;

color:#fff;

/**Thisfixesthepositionandthecolorofthedropdownarrow**/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

我们已经改变菜单的好几个地方,如首先,我们就改变激活菜单默认的黑背景为“CSS渐变”,接着给不激活菜单添加hover状态,并改变里面的文字颜色为深灰色,目的是显示得更为清晰。然后.top-bar-section li:hover 的样式将使得下拉菜单里的子项目被鼠标悬空时显示特定效果。为了完善样式,我们ul.dropdown添加一个背景颜色和重新设置下拉菜单箭头的位置,是因为我们内边距适应.top-bar-section。

第三步:效果

重新刷新页面,看一下现在的效果,我们还没完成样式的编写,只是想看看当调整浏览器的大小时,页面效果是否显示正常。接下来我们将添加“媒体查询”代码来实现这种效果。

编写媒体查询

第一步:媒体查询

我们需要做些操作来使得使用我们自定义样式的菜单栏能够适应不断缩小的屏幕。这里主要涉及到添加一些内边距、行高、文本颜色和背景颜色。如下CSS代码示例,查看每个section的注释。

@mediaonlyscreenand{

/*Makestheresponsivemenufitinthenavigationcontainerandchangeitsbackgroundtoblack*/

.top-barul{

background-color:rgba;

padding-bottom:13px;

/*Changenonactivemenuitemcolortoblack*/

.top-bar-sectionulli>a{

color:#fff;

/*Givesthedropdownulablackfill*/

.top-bar-sectionul{

background:#000;

/*GivetheBACKbuttonaftergoinginasubmenutheappropriatefilling*/

.top-bar-section.dropdownli.titleh5a{

line-height:57px;

/*Thisfixesthepositionandthecolorofthedropdownarrow*/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

}/*endmediaquery*/

第二步:享受你的效果

保存文件,然后重新刷新页面,不断地调整浏览器窗口的大小,你就会看到菜单栏都能很好地展示出来。

总结

最后,总结一下此教程:我们如何利用Foundation5框架里的顶部工具栏来创建一个自定义菜单。需要记住的一点是,菜单栏不一定要被放置在页面的顶部的,可以使用网格系统来包含它,然后就可以放置任何你想放置的地方。

Foundation是一系列非常有用的工具可以快速地创建起响应式网站设计,当你不断地熟悉Foundation这个框架,就可以更高效地、创意地创建出更多好玩的东西出来,继续努力吧!

您可以通过创建一个

备注:更多关于网格系统如何运行的,可以回顾教程第二章:WEB前端框架-Foundation之网格系统

  • Home
  • SVN
  • VB.Net

Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观 。

十一月

 页面标题实例 子标题 

、组件对齐方式

  ×  成功!很好地完成了提交。

对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态,

步骤与创建带有下拉菜单的标签相同,只是需要把 .nav-tabs class 改为 .nav-pills。

13、Bootstrap 页面标题

、下拉菜单

标签添加 class .navbar、.navbar-default。

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠,

    下拉菜单    切换下拉菜单   功能 另一个功能 其他  分离的链接    

B、这会添加四个像素的内边距和一个灰色的边框。

您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked,让胶囊垂直堆叠。

内,添加一个带有 class .progress-bar 的空的

  • 免费域名注册
  • 免费 Window 空间托管

A、通过创建一个

通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素。

A、向元素

成功!很好地完成了提交。

A、添加一个带有 class .progress 的

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。没有glyphicon的css。

如果您不想在常规的导航栏导航组件内使用标准的链接,那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色,

元素。

创建不同样式的进度条的步骤如下:

添加 class .nav-tabs。

1、Bootstrap字体图标

信息标签

您可以使用带有各种大小按钮的下拉菜单:.btn-large、.btn-sm 或 .btn-xs。

  90% 完成 

标签添加至少 50 像素的内边距,内边距的值可以根据您的需要进行设置。

、响应式的导航栏

、徽章与标签相似,主要的区别在于徽章的边角更加圆滑。

Bootstrap布局组件

4、Bootstrap 按钮下拉菜单

免费 Window 空间托管

警告标签

创建一个可取消的警告步骤如下:

  • Home
  • SVN
  • iOS

向标签添加下拉菜单的步骤如下:

B、添加 class .nav-tabs。

A、把带有 class .thumbnail 的 标签改为

B、接着,在上面的

、导航栏中的表单

C、添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。

通过使用锚标签代替列表项,我们可以向列表组添加链接。我们需要使用

B、在该

您可以通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小。输入框中的内容会自动调整大小。

、带有下拉菜单的按钮

C、添加一个关闭按钮。

  90% 完成 

警告!请不要提交。

创建一个条纹的进度条的步骤如下:

如果您想要让导航栏固定在页面的底部,请向 .navbar class 添加 class .navbar-fixed-bottom。

B、.media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。

、静态的顶部

导航菜单与下拉菜单使用相似的语法。默认情况下,列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:

内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的

您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。

内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的

  欢迎登陆页面! 这是一个超大屏幕的实例。  学习更多  

A、.media:该 class 允许将媒体对象里的多媒体浮动到内容区块的左边或者右边。

输入框组。输入框组扩展自 表单控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

  默认    功能 另一个功能 其他  分离的链接 

内,在 class 为 .input-group-addon 的 内放置额外的内容。

、向列表组添加自定义内容

A、通过创建一个

您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时,就会用到这个。

  • 免费域名注册
  • 新 24*7 支持

B、除了更大的

、按钮下拉菜单的大小

,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。

元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 元素。这会让文本看起来更大一号。

本文由mgm娱乐发布,转载请注明来源

关键词: