Bootstrap项目体验

0配置

reset.css

html, body, ul, li, ol, img, p, h1, h2, h3{
  margin: 0;
  padding: 0;
} 

ul, ol, li{
  list-style: none;
}

common.css

:root {
  --theme-color: #5354ff;
  --text-color: #333333;
  
  --title-color: #212224;
  --sub-title-color: #666666;

  --bg-color: #f0f0f0;
  --bg-target-color: #f6f7f9;
  --bg-nav-color: #090909;

  --border-color: #e2e2e2;

  --font-size: 14px;
  --font-size-title: 30px;

  --content-width: 1200px;
}

.wrapper{
  max-width: var(--content-width);
  margin: 0 auto;
}

1实现导航部分

1.1让导航栏从左对齐转为居中

先在navbar内部设置一个盒子包起来所有内容,再设置fluid容器(特点是所有情况下width=100%),在设置最大宽度

部分代码:

.navbar .container-fluid 
{
max-width: var(--content-width);
}

此处必须使用var包含变量

2.在导航栏添加logo

在a标签内部添加img标签,只设置高度,让宽度根据高度自动调整

3.界面导航的文字

使用ul+li,li里面放span来完成剩余的一系列界面导航

span设置padding与cursor:pointer,还有字体

4.鼠标悬浮文字变色

其中默认第一个拥有变色+下划线的样式,即默认为active

易错:.text-link.active(写在同一个元素内的类)与.text-link(空格).active

前者兄弟,后者是子孙

.navbar .text-link.active,
.navbar .text-link:hover
{
  color: var(--theme-color);
}

.navbar .text-link.active span
{
  border-bottom: 2px solid var(--theme-color);
}

<li class="text-link active">
            <span>首页</span>
</li>

 

5.让内容各自左右分布

法一:mr-auto(margin-right:auto)

法二:justify-between

<ul class="navbar-nav mr-auto">
          <li class="text-link active">
            <span>首页</span>
          </li>
          <li class="text-link">
            <span>API</span>
          </li>
          <li class="text-link">
            <span>解决方案</span>
          </li>
          <li class="text-link">
            <span>案例</span>
          </li>
          <li class="text-link">
            <span>新闻</span>
          </li>
          <li class="text-link">
            <span>关于我们</span>
          </li>
        </ul>

        <p class="text-link hot-line">
          <span>咨询热线：4009910008</span>
        </p>

 6.取消某个特定元素的悬浮变色

.navbar .text-link.active,
.navbar .text-link:hover:not(.hot-line)
{
  color: var(--theme-color);
}

8..

.navbar .text-link.hot-line
{
  cursor: inherit;
}

        <p class="text-link hot-line">
          <span>咨询热线：4009910008</span>
        </p>

8.

  /* 修改下拉的背景 */
  #navbarNav{

    position: absolute;
    top: calc(100% + 16px);
    width: 100%;

    background-color: var(--bg-nav-color);
    color: #fff;
    margin: 0 -16px;
    z-index: 100;
  }

2.轮播图??????

$(function() {

  var currentImg = 'none' // none  big  small
  // 1.准备数据
  var banners = [
    {
      id:0,
      bigUrl: './img/banner0.png',
      smUrl: './img/banner0_sm.png'
    },
    {
      id:0,
      bigUrl: './img/banner1.png',
      smUrl: './img/banner1_sm.png'
    },
    {
      id:0,
      bigUrl: './img/banner2.png',
      smUrl: './img/banner2_sm.png'
    }
  ]

  // renderBanner(banners)

  $(window).on('resize',throttle( function() {
    // console.log( $(this).outerWidth() )  // border + paddig + content 
    var winWidth =  $(this).outerWidth()
    var isBigScreen = winWidth >= 768

    // if(currentImg === 'big' && isBigScreen) {
    //   return
    // }
    // if(currentImg === 'small' && !isBigScreen) {
    //   return
    // }

    if(currentImg === 'none'){
      // 掉这个函数来渲染界面
      renderBanner(banners, isBigScreen)
    } 
    
    if(currentImg === 'big' && !isBigScreen) {
      renderBanner(banners, isBigScreen)
    }

    if(currentImg === 'small' && isBigScreen) {
      // 掉这个函数来渲染界面
      renderBanner(banners, isBigScreen)
    }
    
  }))
  $(window).trigger('resize')



  function renderBanner(banners = [], isBigScreen) {

    currentImg = isBigScreen ? 'big' : 'small' 
    // 先把之前的定时器停掉
    $('.carousel').carousel('dispose')

    var banneHtmlString = ''
    // 2.将数据渲染到页面上
    banners.forEach(function(item, index) {
      var active = index === 0 ? 'active' :''
      var imgUrl = isBigScreen ? item.bigUrl: item.smUrl
      banneHtmlString +=`
         <div class="carousel-item ${active}" data-interval="3000">
          <img src="${imgUrl}" class="d-block w-100" alt="...">
        </div>
      `
    })
    $('.carousel-inner').empty().append(banneHtmlString)

    // 自动录播( 开始一个定时器 )
    $('.carousel').carousel('cycle')
  }


})

3.

        <div class="col-md-6 col-xl-3 item">

响应式布局根据,根据宽度依次从大到小为4/2/1列