基本介绍

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. nyoj_116_士兵杀敌（二）_201404131107

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...

  2. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  3. 使用JSONObject 深度序列化和反序列化

    JSONObject 和JSONArray 是json-lib.jar里面最经常使用的两个类,分别能够对对象和数组(集合)进行序列化和反序列化,结构清晰命了,简单易用,功能强大,效率比較高,使用至今一 ...

  4. hdu2852 KiKi&#39;s K-Number

    Problem Description For the k-th number, we all should be very familiar with it. Of course,to kiki i ...

  5. HDU 5305 Friends（dfs）

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...

  6. XAML实例教程系列 - 事件(Event) 五

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 事件(Event) 2012-06-19 01:36 by jv9, 1727 阅读, 7 评论, 收藏, 编辑 Events, ...

  7. cmd 命令操纵文件管理器、创建（删除）多级文件夹

    命令行打开文件夹窗口的六种方法 1. 使用 start 命令 # 打开指定文件夹 > start 路径 # 打开当前文件夹 > start . # 打开含空格文件夹 > start ...

  8. springmvc的jar包

     <!-- spring框架的的组件构成(springFramework)--> 一.核心部分Core Container 1.1 spring-core,spring-beans 提供控 ...

  9. Vue.prototype的用法

    基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...

  10. $(document).ready 与 window.onload的区别？

    $(document).ready  = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...