bootstrap做的导航

顶部导航：nav-tabs

左边导航：nav-list

响应式布局：div嵌套 ~ container、row、ol-lg-X

效果：

源码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>1</title>
        <link rel="stylesheet" href="dist/css/bootstrap.css" />
        <link rel="stylesheet" href="dist/css/bootstrap-theme.css" />
    </head>

    <body>
        <div class="container">
            <!--顶部导航-->
            <div class="row">
                <div class="nav col-lg-12 navbar-brand">
                    <ul class="nav nav-tabs navbar-default ">
                        <li>
                            <a>首页</a>
                        </li>
                        <li class="active">
                            <a>水果</a>
                        </li>
                        <li>
                            <a>自我介绍</a>
                        </li>
                        <li>
                            <a>fuxk</a>
                        </li>
                    </ul>
                </div>
            </div>
            <br />
            <!--内容-->
            <div class="row">
                <div class="col-lg-1">
                    <ul class="nav nav-list navbar-default nav-pills ">
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li class="active">
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-11">
                    <table class="table table-hover">
                        <thead>
                            <tr class="alert-info active table-">
                                <td><b>名称</b></td>
                                <td><b>单价</b></td>
                                <td><b>库存</b></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>番茄</td>
                                <td>1.1</td>
                                <td>3</td>
                            </tr>
                            <tr>
                                <td>苹果</td>
                                <td>2.5</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>哈密瓜</td>
                                <td>2.5</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>草莓</td>
                                <td>2.5</td>
                                <td>10</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="dist/js/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
    </body>

</html>

时间： 2024-08-10 00:05:15

bootstrap做的导航的相关文章

Bootstrap<基础十七>导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

第二百三十八节，Bootstrap输入框和导航组件

Bootstrap输入框和导航组件学习要点: 1.输入框组件 2.导航组件 3.导航条组件本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. 在左侧添加文字 input-group-addon样式class类,写在input同级的span里,给输入框添加一个左片段(Bootstrap)input-group样式class类,写在input外层div里,将

bootstrap(5)关于导航

关于导航首先说明一点,在Bootstrap中的导航组件都依赖于同一个.nav类,状态类是共用的,下面添加的nav样式都是基于 .nav的基类上添加的 1,导航样式导航样式代码如下: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> &

Bootstrap面包屑导航

Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>bootstrap面包屑导航</title> <link rel="stylesheet" type

Bootstrap做的HTML页面在本地IE打开正常，放到服务器上显示就不正常了

Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮navbar-btn 2.导航条中的文本navbar-text 3.导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand.navbar-nav配合起来使用.而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题. <d

学习码匠社区-spring boot 使用bootstrap + thymeleaf 制作导航栏

spring boot 使用 bootstrap + thymeleaf 制作导航栏添加 thymeleaf 依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 配置 application.properties,使得 sprin

做一个导航栏（bootstrap）

<div class="b"> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-10"> <ul class="nav nav-tabs"> <li class="dropdown"> <a class="

.Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得比较漂亮.做开发要有工匠精神,不要只求完成开发任务,那样的话,永远停留在只是简单的写业务逻辑代码水平,我们要做有追求的程序员.本来这么简单的东西,我真是懒得写,但是看到即便是一些工作了好些年的人,做东西也是只管实现功能,啥都不管,还有些界面css样式要么就硬编要么就毫无规则的在页面中进行穿插,遇到要