Bootstrap——导航居中

这是采用了栅格,设置缩进,使看起来居中,但是手机浏览会靠到最左边。另外center-block类好像也不管用。

<div class="row">
            <ul class="nav nav-pills col-md-offset-4">
                <li class="active"><a href="">主页</a></li>
                <li><a href="#">主页</a></li>
                <li><a href="#">主页</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="#">主页<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="">123</a></li>
                        <li><a href="">123</a></li>
                        <li><a href="">123</a></li>
                    </ul>
                </li>
            </ul>
        </div>

来源:http://www.cnblogs.com/Jacklovely/p/6441357.html

时间: 2024-10-07 18:19:54

Bootstrap——导航居中的相关文章

bootstrap导航

导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页 注意 .nav-tabs 类依赖 .nav 基类 代码如下 <!DOCTYPE html> <html ng-app="UserInfoCtrl"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"

Bootstrap导航条

前面的话 导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条 基础导航条 在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

bootstrap 导航元素

<!DOCTYPE html> <html> <head>    <title>Bootstrap 实例 - 带有下拉菜单的胶囊</title>    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">    <script src="/scripts/jquery.min.js"><

Bootstrap导航悬浮顶部,stickUp

stickUp 一个 jQuery 插件 这是一个简单的jQuery插件,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置.此插件可以在多页面的网站上工作,也能在单页面上面实现导航功能.滚动当前页面看看导航条的效果吧. 首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp 经研究必要的js和css为 bootstrap.min.css stickup.css jquery.j

Bootstrap 导航 标题栏

Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.cs

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 1.默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 ro

实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="

Bootstrap学习笔记(6)--导航居中

说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"> <li class="active"><a href="">主页</a></li> <li><a href="#">主页</a></li> <