基本介绍

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. 矩形面积求并（codevs 3044）

    题目描述 Description 输入n个矩形,求他们总共占地面积(也就是求一下面积的并) 输入描述 Input Description 可能有多组数据,读到n=0为止(不超过15组) 每组数据第一行 ...

  2. D. Palindromic characteristics

    time limit per test 3 seconds memory limit per test 256 megabytes input standard input output standa ...

  3. Drools等规则引擎技术对比分析

    项目中需要设计开发一个规则引擎服务,于是调研了业界常用的规则引擎. 常见的规则引擎如下: Ilog JRules 是最有名的商用BRMS: Drools 是最活跃的开源规则引擎: Jess 是Clip ...

  4. HDU 1166敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  5. CI 日志类

    开发ci的过程中,使用log能直观的看出代码运行到哪,还可设置代码查看数据接口的发送情况.日志类: <?php defined('BASEPATH') OR exit('No direct sc ...

  6. using gdb to debug c program

    #include <stdio.h> static void display(int i, int *ptr); int main(void) { int x = 5; int *xptr ...

  7. 【RefactoringCode】The description of the refactoring book

    Last night the book named [Data Structure with Java Hubbed] was closed. When talked about the advant ...

  8. jqury+css实现可弹出伸缩层

    1.使用可弹出伸缩窗调整了之前的页面布局,使用这样的布局使整个界面看起来更加清爽也更简洁 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L ...

  9. Unity编程笔录--ulua+PureMVC框架简单热更新使用

    ulua+PureMVC框架简单热更新使用 前言: 1:作者官网论坛 首先介绍的是这个框架是一位大牛  骏擎[CP]  jarjin   写的,据说原本是"非常多人不知道怎么使用Ulua,所 ...

  10. 树莓派玩耍笔记1 -- 开箱 &amp; 安装系统以及简单配置

    零.前言 树莓派是什么? 吃的么? 呵呵,假设您连这个还不知道,真是out 了. 麻烦出门左拐.百度去(或者,看看官网去?),算了.还是粘贴一些大家都知道的树莓派百科吧: 树莓派由注冊于英国的慈善组织 ...