基本介绍

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. Oracle删除约束和主键的语句

    https://blog.csdn.net/xue_yanan/article/details/78210654?locationNum=8&fps=1

  2. [bzoj1613][Usaco2008 Jan]Running贝茜的晨练计划_动态规划

    Running贝茜的晨练计划 bzoj-1613 Usaco-2008 Jan 题目大意:题目链接(U组题题意真的是没法概括qwq....). 注释:略. 想法:一眼dp题. 状态:dp[i][j]表 ...

  3. codevs——1675 大质数 2

    1675 大质数 2  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 小明因为没做作业而被数学老师罚站,之 ...

  4. [转]SQL Server编程:SMO介绍

    转自:周公 最近在项目中用到了有关SQL Server管理任务方面的编程实现,有了一些自己的心得体会,想在此跟大家分享一下,在工作中用到了SMO/SQL CLR/SSIS等方面的知识,在国内这方面的文 ...

  5. centos 7: 迁移MySQL目录

    Steps: 1. systemctl stop mariadb 2. mkdir data destination folder, ex: /home/mysql 3. cp -R /var/lib ...

  6. Android: 清除View跳转的历史记录

    Intent intent = new Intent(); intent.setClass(SetActivity.this, RegisterLoginActivity.class); intent ...

  7. Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现）

    我们有时候会遇到这么一个情况.就是我在一个ListView里面须要显示的东西事实上是有种类之分的.比方我要分冬天,夏天.秋天.春天,然后在这每一个季节以下再去载入各自的条目数据. 还有,比方我们的通讯 ...

  8. 【Cocos2dx游戏开发】CCTableView实现滑动列表

    在游戏中,经常需要用到列表展示,例如我现在做的卡牌游戏中就有卡牌列表和好友列表需要用到CCTableView,下面简单介绍一下使用方法. CCTableView位于扩展库文件cocos-ext.h中, ...

  9. Java泛型解析(01)：认识泛型

    Java泛型解析(01):认识泛型 What      Java从1.0版本号到如今的8.中间Java5中发生了一个非常重要的变化,那就是泛型机制的引入.Java5引入了泛型,主要还是为了满足在199 ...

  10. HTTPS那些事 用java实现HTTPS工作原理

    HTTPS那些事 用java实现HTTPS工作原理 博客分类: java历险   今天被问到关于https原理的问题,结果由于知识掌握不牢靠,停留于表面,很多细节都无法回答清楚,于是决定把https的 ...