移动web——bootstrap如何修改原组件

基本介绍

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如何修改原组件的更多相关文章

修改原代码定制bootstrap
1.下载对应的Bootstarap和node.js 注:less文件夹中包含了bootstrap中所有样式组件的less源代码: dist保存编译后的css和js等文件 2.命令行输入npm inst ...
Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用首先,最简单 ...
自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...
bootstrap学习之二-组件
一.bootstrap字体图标以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...
Bootstrap中的 Typeahead 组件
Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...
前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
第二百三十八节，Bootstrap输入框和导航组件
Bootstrap输入框和导航组件学习要点: 1.输入框组件 2.导航组件 3.导航条组件本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件文 ...
Web框架之Django重要组件（Django中间件、csrf跨站请求伪造）
Web框架之Django_09 重要组件(Django中间件.csrf跨站请求伪造) 摘要 Django中间件 csrf跨站请求伪造一.Django中间件: 什么是中间件? 官方的说法:中间件是 ...

随机推荐

linux命令与技巧
1.模糊查询:find / -name '*Eclipse*'2.获得管理员权限:sudo -i
android 使用post 提交
1.使用post 方式提交时不要把须要传递的參数写在URL 中,一定要使用 BasicNameValuePair 这个类来完毕创建我想发送一个类似Get 方式的一个URL ---------- ht ...
jvm 堆内存栈内存大小设置
4种方式配置不同作用域的jvm的堆栈内存. 1.Eclise 中设置jvm内存: 改动eclipse的配置文件,对全部project都起作用改动eclipse ...
站点过滤器Filter
--过滤器使用已经非常久了,今天遇到了一个小问题.也就想顺便写一个关于过滤器的博文.记录一下自己使用的感受. 实际上,Filter与Servlet及其相似,差别仅仅是FIlter的doFilter() ...
LeetCode 242. Valid Anagram （验证变位词）
Given two strings s and t, write a function to determine if t is an anagram of s. For example,s = &q ...
splay专题复习——bzoj 3224 & 1862 & 1503 题解
[前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...
HDU 4771 Stealing Harry Potter's Precious dfs+bfs
Stealing Harry Potter's Precious Problem Description Harry Potter has some precious. For example, hi ...
rel='canonical'
rel='canonical' <!DOCTYPE html><html><head> <meta charset="utf-8"/> ...
HDFS01
==============NameNode============== 管理文件系统的命名空间记录每个文件数据在各个DataNode上的位置和副本信息协调客户端对文件的访问 NameNode文件 ...
regEx in Groovy
// 使用正则得到非纯XML文件中的信息 // Response 经常得到的不是纯XML def pattern = ~/(<NewDataSet>).*(<\/NewDataSe ...

移动web——bootstrap如何修改原组件

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

随机推荐

热门专题