今天学习了BootStrap

今天学习了BootStrap

一、BootStrap介绍

Bootstrap是一个前端开发的框架，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

好处：

  1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
  2. 响应式布局：同一套页面可以兼容不同分辨率的设备

学习：

这里还是推荐看API文档，W3c即可满足

img

二、环境搭配

1、下载地址

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

2、搭配

我用vs code为例

选择进行创作的文件夹，将下载好的BootStrap的三个文件夹移入即可。

img

然后我们便可以开始创作了！

img

3、展示一下目录

bootstrap-3.2.1-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js
    └── jquery-3.2.1.min.js //某些组件依赖于jQuery，所以确保下载对应版本的jQuery文件

三、响应式布局

同一套页面可以兼容不同分辨率的设备。

如同这样：

这是电脑百度img

这是手机百度

img

页面都是一样，只是分辨率不一样罢了。

1、实现

依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

2、步骤

（1）、定义容器---相当于之前的table

容器分类：

  • container：两边留白， 用于固定宽度并支持响应式布局的容器

  • container-fluid：每一种设备都是100%宽度， 用于 100% 宽度，占据全部视口（viewport）的容器

（2）、定义行---相当于之前的tr---样式：row

（3）、定义元素。指定该元素在不同的设备上，所占的格子数目。

​ 样式：col-设备代号-格子数目

​ 设备代号：

  • xs：超小屏幕 手机 (<768px)：col-xs-12

  • sm：小屏幕 平板 (≥768px)

  • md：中等屏幕 桌面显示器 (≥992px)

  • lg：大屏幕 大桌面显示器 (≥1200px)

注意：

  • 一行中如果格子数目超过12，则超出部分自动换行。

  • 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

  • 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

3、栅格系统

上面有说响应式布局依赖于栅格系统，就来了解一下吧，我也是在别人的博客里看到的。栅格系统英文为“grid systems”，就是运用固定的格子设计版面布局，其风格工整简洁，非常受欢迎。看一下下面九点就好。

（1）行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

（2）通过“行（row）”在水平方向创建一组“列（column）”。

（3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

（4）类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

（5）通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

（6）负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

（7）栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

（8）如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

（9）栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在，也影响大屏幕设备。

4、优点和缺点

优点：

（1）、面对不同分辨率设备灵活性强

（2）、能够快捷解决多设备显示适应问题

缺点：

（1）、兼容各种设备工作量大，效率低下

（2）、代码累赘，会出现隐藏无用的元素，加载时间加长

（3）、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

（4）、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

四、案例

试着来写一下代码，感受一下框架的快感吧~

1、轮播图

首先怎么运用到BootStrap呢？

W3C: Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

那就是运用Carousel插件呗，来试一试：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap- 简单的轮播图-（Carousel）插件</title>
   <!-- 这里是我的BootStrap目录位置和jQuery版本 -->
   <link href="../Bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="../BootStrap/js/jquery-3.2.1.min.js"></script>
   <script src="../BootStrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播图（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播图（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="https://note.youdao.com/yws/public/resource/180e3566c9b34e6eb0529fcbf70bc8a5/xmlnote/63C8D7122098433D9FF3503DF2F75EBF/2339" alt="First slide">
      </div>
      <div class="item">
         <img src="https://note.youdao.com/yws/public/resource/180e3566c9b34e6eb0529fcbf70bc8a5/xmlnote/869CECEF7C514BB5B1E08666816B5B03/2359" alt="Second slide">
      </div>
      <div class="item">
         <img src="https://note.youdao.com/yws/public/resource/180e3566c9b34e6eb0529fcbf70bc8a5/xmlnote/641C19AAB5FE4F3B9F26038E4C378258/2365" alt="Third slide">
      </div>
   </div>
   <!-- 轮播图（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 

</body>
</html>

展示一下效果：

img

img

下面是三个导航，没有设置定时切换，需要手动实现。有兴趣的小伙伴可以看看之前的 https://www.cnblogs.com/wangzheming35/p/11826456.html#day3javascript 这篇文章，来写个定时器呢。

2、导航目录

有点类似博客的目录，指哪里跳转到哪里

依赖Affix插件

展示一下代码和效果：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap- 简单导航  Affix插件</title>
   <!--en,做的有点像目录了-->
   <link href="../Bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="../BootStrap/js/jquery-3.2.1.min.js"></script>
   <script src="../BootStrap/js/bootstrap.min.js"></script>

   <style type="text/css">
      /* Custom Styles */
      ul.nav-tabs{
          width: 140px;
          margin-top: 20px;
          border-radius: 4px;
          border: 1px solid #ddd;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
      }
      ul.nav-tabs li{
          margin: 0;
          border-top: 1px solid #ddd;
      }
      ul.nav-tabs li:first-child{
          border-top: none;
      }
      ul.nav-tabs li a{
          margin: 0;
          padding: 8px 16px;
          border-radius: 0;
      }
      ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
          color: #fff;
          background: #0088cc;
          border: 1px solid #0088cc;
      }
      ul.nav-tabs li:first-child a{
          border-radius: 4px 4px 0 0;
      }
      ul.nav-tabs li:last-child a{
          border-radius: 0 0 4px 4px;
      }
      ul.nav-tabs.affix{
          top: 30px; /* Set the top position of pinned element */
      }
   </style>
</head>
 
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
  <div class="jumbotron">
       <h1>Bootstrap Affix</h1>
   </div>
   <div class="row">
       <div class="col-xs-3" id="myScrollspy">
           <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
               <li class="active"><a href="#section-1">第一部分</a></li>
               <li><a href="#section-2">第二部分</a></li>
               <li><a href="#section-3">第三部分</a></li>
               <li><a href="#section-4">第四部分</a></li>
               <li><a href="#section-5">第五部分</a></li>
           </ul>
       </div>
       <div class="col-xs-9">
           <h2 id="section-1">第一部分</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
           <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
           <hr>
           <h2 id="section-2">第二部分</h2>
           <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
           <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p>
           <hr>
           <h2 id="section-3">第三部分</h2>
           <p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
           <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
           <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
           <hr>
           <h2 id="section-4">第四部分</h2>
           <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
           <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
           <p>Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p>
           <p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.</p>
           <hr>
           <h2 id="section-5">第五部分</h2>
           <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
           <p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
           <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
           <p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p>
           <p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
       </div>
   </div>
</div>


</body>
</html>

img

还有很多小demo都可以在W3C里学习啊，今天第一次学习框架，感觉很nb，期待后端学习Spring、MyBatis等等时，可以感觉更加nb！

posted @ 2019-11-12 17:57  我在吃大西瓜呢  阅读(321)  评论(0)  编辑  收藏  举报