基本介绍

1、bootstrap提供了丰富的组件，但是有时候我们不仅要删除不必要的标签，还需要修改里面的样式

2、我们建议若是修改样式那么最好将源样式从css中拷贝出来，名字换掉，然后修改具体样式，这样不会破坏原css中的样式，而且不怕繁杂的嵌套关系，万无一失

基本使用

1、将原css样式复制出来然后进行修改

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>

        .self-nav {

            background-color: #f8f8f8;

            border-color: #e7e7e7;

        }

        .self-nav .navbar-brand {

            color: #777;

            margin-top: 15px;

        }

        .self-nav .navbar-brand:hover,

        .self-nav .navbar-brand:focus {

            color: #5e5e5e;

            background-color: transparent;

        }

        .self-nav .navbar-text {

            color: #777;

        }

        .self-nav .navbar-nav > li > a {

            color: #777;

            height: 80px;

            line-height: 50px;

        }

        .self-nav .navbar-nav > li > a:hover,

        .self-nav .navbar-nav > li > a:focus {

            color: #333;

            background-color: transparent;

            border-bottom: 2px solid orange;

        }

        .self-nav .navbar-nav > .active > a,

        .self-nav .navbar-nav > .active > a:hover,

        .self-nav .navbar-nav > .active > a:focus {

            color: #555;

            /*background-color: #e7e7e7;*/

        }

        .self-nav .navbar-nav > .disabled > a,

        .self-nav .navbar-nav > .disabled > a:hover,

        .self-nav .navbar-nav > .disabled > a:focus {

            color: #ccc;

            background-color: transparent;

        }

        .self-nav .navbar-toggle {

            border-color: #ddd;

        }

        .self-nav .navbar-toggle:hover,

        .self-nav .navbar-toggle:focus {

            background-color: #ddd;

        }

        .self-nav .navbar-toggle .icon-bar {

            background-color: #888;

        }

        .self-nav .navbar-collapse,

        .self-nav .navbar-form {

            border-color: #e7e7e7;

        }

        .self-nav .navbar-nav > .open > a,

        .self-nav .navbar-nav > .open > a:hover,

        .self-nav .navbar-nav > .open > a:focus {

            color: #555;

            background-color: #e7e7e7;

        }

        @media (max-width: 767px) {

            .self-nav .navbar-nav .open .dropdown-menu > li > a {

                color: #777;

            }

            .self-nav .navbar-nav .open .dropdown-menu > li > a:hover,

            .self-nav .navbar-nav .open .dropdown-menu > li > a:focus {

                color: #333;

                background-color: transparent;

            }

            .self-nav .navbar-nav .open .dropdown-menu > .active > a,

            .self-nav .navbar-nav .open .dropdown-menu > .active > a:hover,

            .self-nav .navbar-nav .open .dropdown-menu > .active > a:focus {

                color: #555;

                background-color: #e7e7e7;

            }

            .self-nav .navbar-nav .open .dropdown-menu > .disabled > a,

            .self-nav .navbar-nav .open .dropdown-menu > .disabled > a:hover,

            .self-nav .navbar-nav .open .dropdown-menu > .disabled > a:focus {

                color: #ccc;

                background-color: transparent;

            }

        }

        .self-nav .navbar-link {

            color: #777;

        }

        .self-nav .navbar-link:hover {

            color: #333;

        }

        .self-nav .btn-link {

            color: #777;

        }

        .self-nav .btn-link:hover,

        .self-nav .btn-link:focus {

            color: #333;

        }

        .self-nav .btn-link[disabled]:hover,

        fieldset[disabled] .self-nav .btn-link:hover,

        .self-nav .btn-link[disabled]:focus,

        fieldset[disabled] .self-nav .btn-link:focus {

            color: #ccc;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<nav class="navbar self-nav">

    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">Brand</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

                <li><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#">Link</a></li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动web——bootstrap如何修改原组件的更多相关文章

  1. 修改原代码定制bootstrap

    1.下载对应的Bootstarap和node.js 注:less文件夹中包含了bootstrap中所有样式组件的less源代码: dist保存编译后的css和js等文件 2.命令行输入npm inst ...

  2. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  3. 自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...

  4. bootstrap学习之二-组件

    一.bootstrap字体图标 以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...

  5. Bootstrap中的 Typeahead 组件

    Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...

  6. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  7. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

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

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

  9. Web框架之Django重要组件（Django中间件、csrf跨站请求伪造）

    Web框架之Django_09 重要组件(Django中间件.csrf跨站请求伪造)   摘要 Django中间件 csrf跨站请求伪造 一.Django中间件: 什么是中间件? 官方的说法:中间件是 ...

随机推荐

  1. 【ZJOI2017 Round2练习&BZOJ4826】D1T2 sf（主席树，单调栈）

    题意: 思路:From http://blog.csdn.net/neither_nor/article/details/70211150 对每个点i,单调栈求出左边和右边第一个大于i的位置,记为l[ ...

  2. TCP/IP协议1

    1.分层 应用层 telent 远程登录,ftp 文件传输协议,smtp 简单邮件传送协议 snmp 简单网络管理协议 email 运输层  tcp(提供可靠的数据通信)和udp(数据报的分组从一台主 ...

  3. java复习volatile关键字解析

    转自https://www.cnblogs.com/dolphin0520/p/3920373.html volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受 ...

  4. 洛谷—— P1339 [USACO09OCT]热浪Heat Wave

    P1339 [USACO09OCT]热浪Heat Wave 题目描述 The good folks in Texas are having a heatwave this summer. Their ...

  5. 30、Java并发性和多线程-阿姆达尔定律

    以下内容转自http://ifeve.com/amdahls-law/: 阿姆达尔定律可以用来计算处理器平行运算之后效率提升的能力.阿姆达尔定律因Gene Amdal 在1967年提出这个定律而得名. ...

  6. 浅谈SQL Server 对于内存的管理--宋沄剑 英文名:CareySo

    http://www.cnblogs.com/CareySon/archive/2012/08/16/HowSQLServerManageMemory.html

  7. Swift: 转换NSString to String

    如下代码获取一个String?的结果 let s = NSString(data: data, encoding: encoding) return s as? String

  8. update city_demo set city=(select city from city order by rand() limit1);

    update city_demo set city=(select city from city order by rand() limit1); 因为使用了rand()函数,所以每一次查询的结果是不 ...

  9. 虚拟机ODPS初体验

    大数据竞赛的第二阶段须要通过远程桌面的方式连接阿里提供的虚拟机, 全部操作都是在远程主机上进行. 在搞清楚文件回传方式之前真是各种麻烦(写博客都没有办法贴代码). 用了两个上午初步上手, 希望接下来进 ...

  10. 关于HuffmanCoding的简单分析

    1.what's problem we faced? /** *    Q: what's problem we faced? * *    A: Data compression is still ...