bootstrap案例

最新推荐文章于 2024-06-10 21:17:33 发布

Ron韦斯莱

最新推荐文章于 2024-06-10 21:17:33 发布

阅读量1.4k

点赞数 3

本文链接：https://blog.csdn.net/qq_43537987/article/details/90576887

版权

效果展示：总体代码：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor...

摘要由CSDN通过智能技术生成

效果展示：
在这里插入图片描述

总体代码：

<!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="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="lib/html5shiv/html5shiv.min.js"></script>
      <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
     
body {
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

@font-face {
  font-family: 'myfont';
  src:  url('font/MiFie-Web-Font.eot') format('embedded-opentype'), 
        url('font/MiFie-Web-Font.svg') format('svg'),
        url('font/MiFie-Web-Font.ttf') format('truetype'), 
        url('font/MiFie-Web-Font.woff') format('woff');
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: myfont;
  font-style: normal;
}

.icon-mobilephone::before {
  content: "\e908";
  font-size: 13px;
}

.icon-telephone::before {
  content: "\e909";
  font-size: 15px;
}

.icon-logo::before {
  content: "\e93e";
}

.icon-icon::before {
  content: "\e920";
}


/**
 * 头部区域
 */

header {
  /*height: 200px;*/
}

header > .topbar {
  height: 40px;
  border-bottom: 1px solid #c0c0c0;
  line-height: 40px;
}

header > .topbar > .container > .row > div {
  height: 40px;
  font-size: 12px;
  color: #888;
}

header > .topbar > .container > .row > div + div {
  border-left: 1px solid #c0c0c0;
}

header a {
  color: #888;
}

header a:hover {
  text-decoration: none;
  color: red;
}

header .btn-sample {
  color: #fff;
}

header .mobile-link > img {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  top: 30px;
  z-index: 1001;
}

header .mobile-link:hover > img {
  display: block;
}
header > .topbar > .container > .row > div:nth-of-type(4) > a:nth-of-type(2) {
       color: #888;
       font-size: 13px;
}
header > .topbar > .container > .row > div:nth-of-type(4) > a:nth-of-type(2):hover {
    text-decoration: none;
    color: red;
}
 header .icon-icon {
  font-size: 50px;
  color: #E92322;
  line-height: 25px;
  vertical-align: middle;

} 

header .icon-logo {
  text-align: center;
  font-size: 32px;
  color: #333;
  line-height: 32px;
  vertical-align: middle;
}

.navbar{
  margin-bottom: 0;
}


/**
 * 测试样式区域
 */

/* section {
  height: 200px;
  background-color: #fff;
} */

section:nth-of-type(2n) {
  /* 选择到第1,3,5,。。。。 */
  background-color: #f5f5f5;
}



      /* 自己设置的btn样式 */
      .btn-sample { 
        color: #ffffff; 
        background-color: #9830B0; 
        border-color: #B06530; 
      } 
       
      .btn-sample:hover, 
      .btn-sample:focus, 
      .btn-sample:active, 
      .btn-sample.active, 
      .open .dropdown-toggle.btn-sample { 
        color: #ffffff; 
        background-color: #810B9C; 
        border-color: #B06530; 
      } 
       
      .btn-sample:active, 
      .btn-sample.active, 
      .open .dropdown-toggle.btn-sample { 
        background-image: none; 
      } 
       
      .btn-sample.disabled, 
      .btn-sample[disabled], 
      fieldset[disabled] .btn-sample, 
      .btn-sample.disabled:hover, 
      .btn-sample[disabled]:hover, 
      fieldset[disabled] .btn-sample:hover, 
      .btn-sample.disabled:focus, 
      .btn-sample[disabled]:focus, 
      fieldset[disabled] .btn-sample:focus, 
      .btn-sample.disabled:active, 
      .btn-sample[disabled]:active, 
      fieldset[disabled] .btn-sample:active, 
      .btn-sample.disabled.active, 
      .btn-sample[disabled].active, 
      fieldset[disabled] .btn-sample.active { 
        background-color: #9830B0; 
        border-color: #B06530; 
      }      
      .btn-sample .badge { 
        color: #9830B0; 
        background-color: #ffffff; 
      }
      /* 自己修改2 */
      .navbar-sample {
          background-color: #fff;
          border-color: #f5f5f5;
          width: 100%;
          top: 0;
        }
        .navbar-sample .navbar-brand {
          color: #777;
        }
        .navbar-sample .navbar-brand:hover,
        .navbar-sample .navbar-brand:focus {
          color: #5e5e5e;
          background-color: transparent;
        }
        .navbar-sample .navbar-text {
          color: #777;
        }
        .navbar-sample .navbar-nav > li > a {
          color: #777;
        }
        .navbar-sample .navbar-nav > li > a:hover,
        .navbar-sample .navbar-nav > li > a:focus {
          color: #333;
          background-color: transparent;
        }
        .navbar-sample .navbar-nav > .active > a,
        .navbar-sample .navbar-nav > .active > a:hover,
        .navbar-sample .navbar-nav > .active > a:focus {
          color: #555;
          background-color: #e7e7e7;
        }
        .navbar-sample .navbar-nav > .disabled > a,
        .navbar-sample .navbar-nav > .disabled > a:hover,
        .navbar-sample .navbar-nav > .disabled > a:focus {
          color: #ccc;
          background-color: transparent;
        }
        .navbar-sample .navbar-toggle {
          border-color: #ddd;
        }
        .navbar-sample .navbar-toggle:hover,
        .navbar-sample .navbar-toggle:focus {
          background-color: #ddd;
        }
        .navbar-sample .navbar-toggle .icon-bar {
          background-color: #888;
        }
        .navbar-sample .navbar-collapse,
        .navbar-sample .navbar-form {
          border-color: #e7e7e7;
        }
        .navbar-sample .navbar-nav > .open > a,
        .navbar-sample .navbar-nav > .open > a:hover,
        .navbar-sample .navbar-nav > .open > a:focus {
          color: #555;
          background-color: #e7e7e7;
        }
        @media (max-width: 767px) {
          .navbar-sample .navbar-nav .open .dropdown-menu > li > a {
            color: #777;
          }
          .navbar-sample .navbar-nav .open .dropdown-menu > li > a:hover,
          .navbar-sample .navbar-nav .open .dropdown-menu > li > a:focus {
            color: #333;
            background-color: transparent;
          }
          .navbar-sample .navbar-nav .open .dropdown-menu > .active > a,
          .navbar-sample .navbar-nav .open .dropdown-menu > .active > a:hover,
          .navbar-sample .navbar-nav .open .dropdown-menu > .active > a:focus {
            color: #555;
            background-color: #e7e7e7;
          }
          .navbar-sample .navbar-nav .open .dropdown-menu > .disabled > a,
          .navbar-sample .navbar-nav .open .dropdown-menu > .disabled > a:hover,
          .navbar-sample .navbar-nav .open .dropdown-menu > .disabled > a:focus {
            color: #ccc;
            background-color: transparent;
          }
        }
        .navbar-sample .navbar-link {
          color: #777;
        }
        .navbar-sample .navbar-link:hover {
          color: #333;
        }
        .navbar-sample .btn-link {
          color: #777;
        }
        .navbar-sample .btn-link:hover,
        .navbar-sample .btn-link:focus {
          color: #333;
        }
        .navbar-sample .btn-link[disabled]:hover,
        fieldset[disabled] .navbar-sample .btn-link:hover,
        .navbar-sample .btn-link[disabled]:focus,
        fieldset[disabled] .navbar-sample .btn-link:focus {
          color: #ccc;
        }


      .navbar-sample .navbar-nav > .active > a, .navbar-sample .navbar-nav > .active > a:hover, .navbar-sample .navbar-nav > .active > a:focus {
        background-color: #fff;
        border-bottom: 2px solid red;
      }
      .navbar-sample .navbar-nav > li > a:hover, .navbar-sample .navbar-nav > li > a:focus {
          color: #333;
          background-color: transparent;
          border-bottom: 2px solid red;
      }
      section > #carousel-example-generic > .carousel-inner > .item >img {
        width: 100%;
      }
      section > #carousel-example-generi

最低0.47元/天解锁文章

Ron韦斯莱

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
bootstrap案例

效果展示：总体代码：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor...
复制链接

扫一扫