Bootstrap系列 -- 37. 基础导航样式

  Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

<ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>
时间: 2024-08-09 19:53:40

Bootstrap系列 -- 37. 基础导航样式的相关文章

Bootstrap系列 -- 38. 基础导航条

在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default” “.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置 <div class="navbar navbar-default" role="navigati

Bootstrap系列 -- 44. 分页导航

带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法. <ul class="pagination"> <li><a href="#">«</a></li>

Bootstrap系列 -- 43. 固定导航条

很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定在浏览器窗口顶部 .navbar-fixed-bottom:导航条固定在浏览器窗口底部 <div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div>

Bootstrap系列 -- 11. 基础表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

Bootstrap系列 -- 9. 表格

一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-striped:斑马线表格 3. .table-bordered:带边框的表格 4. .table-hover:鼠标悬停高亮的表格 5. .table-condensed:紧凑型表格 6. .table-responsive:响应式表格 二. Bootstrap 行样式 <table class="ta

sql系列(基础篇)-第一章 关于sysdate

第一章 基本的SQL语句 1. 查询数据库系统时间,常以服务器默认的格式进行显示(根据数据库的字符集而定): 注意:dual 为数据库中的虚表,隶属于管理员 sys 用户,但所有的用户都可以访问:无实际意义,仅充当select 语句的结构(用 select取系统信息.临时结果等时,以 dual 充当语句结构): [email protected]>select sysdate from dual; SYSDATE --------- 18-JUN-14 1.1 修改系统时间的显示格式:(sess

Bootstrap两端对齐的导航实例

Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 两端对齐的导航元素</title> <style> .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav:before, .nav:after { display: table;content:

【10】了解Bootstrap栅格系统基础案例(5)

这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --> <