bootstrap4 新特性

最新推荐文章于 2022-06-18 20:16:41 发布

qiphon3650

最新推荐文章于 2022-06-18 20:16:41 发布

阅读量3.6k

点赞数 1

文章标签： bootstrap4

转载自http://geek.csdn.net/news/detail/38027

从Less迁移到Sass：现在，Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快；
改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。
支持选择弹性盒模型（flexbox）：这是项划时代的功能——只要修改一个Boolean变量，就可以利用flexbox的优势快速布局。
废弃了wells、thumbnails和panels，使用cards代替：Cards是个全新概念，但使用起来与wells、thumbnails及panels很像，且更方便。
将所有HTML重置样式表整合到Reboot中：在用不了Normalize.css的地方可以用Reboot了，它提供了更多选项。例如box-sizing: border-box、margin tweaks等都存放在一个单独的 Sass 文件中。
新的自定义选项：不再像上个版本一样，将渐变、淡入淡出、阴影等效果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果？很简单，只要更新变量值，然后重新编译就可以了。
不再支持IE8（浏览器支持IE10+在IE9下的支持也是不错的，安卓 v5+），使用rem和em单位：放弃对IE8的支持意味着开发者可以放心地利用CSS的优点，不必研究css hack技巧或回退机制了。使用rem和em代替px单位，更适合做响应式布局，控制组件大小。如果要支持IE8，只能继续用Bootstrap 3。
重写所有JavaScript插件：为了利用JavaScript的新特性，Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。
改进工具提示和popovers自动定位：这部分要感谢Tether工具的帮助。
改进文档：所有文档以Markdown格式重写，添加了一些方便的插件组织示例和代码片段，文档使用起来会更方便，搜索的优化工作也在进行中。
更多变化：支持自定义窗体控件、空白和填充类，此外还包括新的实用程序类等。
以上更新只是冰山一角， v4版共有1100多次commits和 12万行代码更新，这些更新可以在v4-alpha文档中查看。

开发计划
v4版本所有的源代码都在Github的v4-dev分支上开源。此外，还有一个v4开发和跟踪pr ，公布master的changes列表和待开发列表。

浏览器支持

"browserslist": [
    "last 1 major version",
    ">= 1%",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ]

其他依赖版本

"peerDependencies": {
      "jquery": "1.9.1 - 3",
      "popper.js": "^1.12.9"
    }

按钮新增样式下图warning为hover时状态
这里写图片描述

新增块级按钮
这里写图片描述

增加按钮的激活状态

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

按钮选中切换
这里写图片描述

卡片card
没有预设margin 需要自己按需求添加，bootstrap为我们提供了margin 和padding 类看我的下一篇文章http://blog.csdn.net/qiphon3650/article/details/79262455

<div class="col-md-3">
  <div class="card">
    <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

下图是放在container中的card
这里写图片描述

<div class="col-md-6">
  <div class="card" style="width: 18rem;">
    <div class="card-body">  <!--  card-body提供padding支持  -->
      <h5 class="card-title">Card title</h5>  <!--  标题  -->
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>  <!--  副标题  mb-2为内置margin的类 -->
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="card-link">Card link</a>  <!--  链接的官方样式 -->
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

这里写图片描述
列表群組

 <div class="card mt-3" style="width: 18rem;">
   <ul class="list-group list-group-flush">
     <li class="list-group-item">Cras justo odio</li>
     <li class="list-group-item">Dapibus ac facilisis in</li>
     <li class="list-group-item">Vestibulum at eros</li>
   </ul>
 </div>
 <!--  或者是带标题的  -->
  <div class="card mt-3" style="width: 18rem;">
    <div class="card-header">
      Featured
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
  </div>

这里写图片描述
也可以把所有的放在一起 card-header和card-footer可以做页眉和页脚（页脚是后加的，下面图片没有显示）

<div class="card">
   <img class="card-img-top p-2" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
   <div class="card-body">
     <h4 class="card-title">
       this is title
     </h4>
     <div class="card-text">
       this is text content so   .....................
     </div>
     <button class="btn btn-primary btn-block">this is block button</button>
   </div>
   <div class="card-header border-top">list-header</div>
   <ul class="list-group list-group-flush">
     <li class="list-group-item">
       item-one
     </li>
     <li class="list-group-item">
       item-one
     </li>
     <li class="list-group-item">
       item-one
     </li>
   </ul>
   <div class="card-body">
     <a href="" class="card-link">link-one</a>
     <a href="" class="card-link">link-one</a>
   </div>
   <div class="card-footer text-muted">
    2 days ago
  </div>
 </div>

这里写图片描述

card实现tabs

<div class="col-md-6">
   <div class="card text-center">
     <div class="card-header">
       <ul class="nav nav-tabs card-header-tabs">
         <li class="nav-item">
           <a class="nav-link active" href="#">Active</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="javascript:void 0 ">Link</a>
         </li>
         <li class="nav-item">
           <a class="nav-link disabled" href="#">Disabled</a>
         </li>
       </ul>
     </div>
     <div class="card-body">
       <h5 class="card-title">Special title treatment</h5>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
   </div>
 </div>
 <div class="col-md-6">
   <div class="card text-center mt-2">
     <div class="card-header">
       <ul class="nav nav-pills card-header-pills">
         <li class="nav-item">
           <a class="nav-link active" href="#">Active</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
           <a class="nav-link disabled" href="#">Disabled</a>
         </li>
       </ul>
     </div>
     <div class="card-body">
       <h5 class="card-title">Special title treatment</h5>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
   </div>
 </div>

这里写图片描述

文字覆盖图片

<div class="card">
  <imgclass="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
  <div class="card-img-overlay">
    <div class="card-title font-weight-bold">this is title</div>
  </div>
</div>

这里写图片描述

卡片样式

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

这里写图片描述
卡片组所有的卡片显示在一行内，不会换行

<div class="card-group mt-5">
   <div class="card">
     <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
 </div>

这里写图片描述
不相连的卡片

 <div class="card-deck mt-5">
  <div class="card">
    <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

这里写图片描述
分栏类似瀑布流的实现

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

但是显示的顺序和想象的不太一样，毕竟他是用css3 的column实现的
这里写图片描述
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

轮播图

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://www.runyuanzs.com/templets/default/images/20180107/banner_750.png" alt="First slide">
      <div class="carousel-caption text-danger">
        <h5>this is figuer's caption</h5>
        <p>more info can write here!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://www.runyuanzs.com/templets/default/images/20180107/banner_750.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://www.runyuanzs.com/templets/default/images/banner_750.png" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

这里写图片描述
如果轮播图不会自动滚动可以在js里面添加·$(‘.carousel’).carousel()·

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted(){
    // console.log(1)
    $('#carouselExampleIndicators').carousel({
      keyboard:true, //键盘事件不能实现
      interval:2000,
      ride:false,  //首次进入是否播放
      wrap:true  //播放到最后一张是否继续循环播放
    })
    // document.onkeydown=function(e){
    //   console.log(e)
    // }
    // document.addEventListener('keydown',function(e){
      // $('#carouselExampleIndicators').carousel('next')
    // },false)
  },
  methods:{

  }
};

折叠

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

这里写图片描述
这个直接看就行了，不赘述
下拉列表

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

这里写图片描述
没什么太多变化
https://v4.bootcss.com/docs/4.0/components/dropdowns/
列表实现手风琴效果

 <div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">..wefsdfsddddddddddddd.</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">..ssssssssssssssssssssssssssssss.</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">..ffffffffffffffffffffff.</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...ccccccccccccccccccc</div>
    </div>
  </div>
</div>
-------------------------------下面的看着清晰些
<!-- List group -->
 <div class="list-group" id="myList" role="tablist">
   <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
   <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
   <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
   <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
 </div>

 <!-- Tab panes -->
 <div class="tab-content">
   <div class="tab-pane active" id="home" role="tabpanel">..ssss.</div>
   <div class="tab-pane" id="profile" role="tabpanel">..fgfgf.</div>
   <div class="tab-pane" id="messages" role="tabpanel">..ffff.</div>
   <div class="tab-pane" id="settings" role="tabpanel">.gggg..</div>
 </div>