[北京|结业弟子]JS-张新|2018年09月02日的日报-技能树.IT修真院

发表于： 2018-09-02 19:50:15

1 793

今天完成的事情：

一.bootstrap有哪些常用组件

目前常用的bootstrap组件：

1.轮播图

2.下拉菜单

3.响应式导航栏

下拉菜单

如需使用下拉菜单，首先要引入bootstrap文件，一般都是引入网上别人提供的cdn，当然，自己可以引入自己定制好的bootstrap文件。然后只需要在 class .dropdown 内加上下拉菜单即可。

给下拉按钮添加dropdown-toggle类和指向性用id，如id="menu1",data-toggle用来控制弹出框元素

给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单

响应式导航条

创建一个默认的响应式导航条的步骤如下:

1.向nav标签添加 class .navbar、.navbar-default。

2.向上面的元素添加 navbar-header，navbar-header

3.给navbar-header的button添加data-toggle="collapse" data-target="#example-navbar-collapse"。

4.给下面的div添加class="collapse navbar-collapse" id="example-navbar-collapse"

1）.navbar-toggle样式是控制3根斑马线的。

2）.navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中

3）.collapsed是为了响应折叠插件的

4）.data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容

使用bootstrap的注意事项

bootstrap文件里面有很多默认设置，可能会在页面上起作用，这个要注意一下。还有就是.当我们引入bootstrap.js和jquery.js文件时我们要注意引入该文件的先后顺序，要先引入jquery.js在引入bootstrap.js按照这样的顺序来引入文件，否则就会报错。因为bootstarp.js文件的开发是基于jquery开发的，所以要先引入jquery.js才可以使用bootstrap。而且引入网上cdn的话要注意http和https的区别，有时候应用不对的话也会报错

二.

学习了表格的制作，进一步巩固了bootstrap的用法。

三.完成了任务8/9的第二个界面.

<main>
<h2>运维方向</h2>
<div class="foot1"></div>
<div class="container box8">
<div class="row">
<li class="col-12 col-md-6 col-lg-4 content1">
<div class="intreduce1">
<img src="people.jpg" alt="">
<div>
<span class="neer">Web前端工程师</span><br>
<span class="neer1">Web前端开发工程师，主要职责是 利用（X）HTML / CSS / JavaScript / flash等各种Web技术进行产品的开 </span>
</div>
</div>
<div class="intreduce2">
<div class="dim">
<span class="six">门槛</span>
<img class="seven" src="five.jpg" alt="">
</div>
<div>
<span class="six">难易程度</span>
<img class="seven" src="five.jpg" alt="">
<img class="seven" src="five.jpg" alt="">
</div>
</div>
<div class="intreduce3">
<div class="mid">
<span class="six">成长周期</span
><span class="red">1-3</span
><span>年</span>
</div>
<div>
<span class="six">稀缺程度</span
><span class="red">345</span
><span>家公司需要</span>
</div>
</div>
<div class="intreduce4">
<div class="serve">
<div>
<span class="six">薪资待遇</span>
</div>
</div>
<div class="content5">
<div class="one">
<span class="three">0-1年</span>
<span class="four">5k-10k/月</span>
</div>
<div  class="one">
<span class="three">1-3年</span>
<span class="four">10k-20k/月</span>
</div>
<div class="two">
<span class="three">3-年</span>
<span class="four">20k-50k/月</span>
</div>
</div>
</div>
<div class="intreduce5">
<h3>有<span class="red">286</span>人正在学习</h3>
</div>
<div class="intreduce6">
<p class="six">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</p>
</div>
</li>
<li class="col-12 col-md-6 col-lg-4 content1">
<div class="intreduce1">
<img src="people.jpg" alt="">
<div>
<span class="neer">Web前端工程师</span><br>
<span class="neer1">Web前端开发工程师，主要职责是 利用（X）HTML / CSS / JavaScript / flash等各种Web技术进行产品的开 </span>
</div>
</div>
<div class="intreduce2">
<div class="dim">
<span class="six">门槛</span>
<img class="seven" src="five.jpg" alt="">
</div>
<div>
<span class="six">难易程度</span>
<img class="seven" src="five.jpg" alt="">
<img class="seven" src="five.jpg" alt="">
</div>
</div>
<div class="intreduce3">
<div class="mid">
<span class="six">成长周期</span
><span class="red">1-3</span
><span>年</span>
</div>
<div>
<span class="six">稀缺程度</span
><span class="red">345</span
><span>家公司需要</span>
</div>
</div>
<div class="intreduce4">
<div class="serve">
<div>
<span class="six">薪资待遇</span>
</div>
</div>
<div class="content5">
<div class="one">
<span class="three">0-1年</span>
<span class="four">5k-10k/月</span>
</div>
<div  class="one">
<span class="three">1-3年</span>
<span class="four">10k-20k/月</span>
</div>
<div class="two">
<span class="three">3-年</span>
<span class="four">20k-50k/月</span>
</div>
</div>
</div>
<div class="intreduce5">
<h3>有<span class="red">286</span>人正在学习</h3>
</div>
<div class="intreduce6">
<p class="six">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</p>
</div>
</li>
<li class="col-12 col-md-6 col-lg-4 content1">
<div class="intreduce1">
<img src="people.jpg" alt="">
<div>
<span class="neer">Web前端工程师</span><br>
<span class="neer1">Web前端开发工程师，主要职责是 利用（X）HTML / CSS / JavaScript / flash等各种Web技术进行产品的开 </span>
</div>
</div>
<div class="intreduce2">
<div class="dim">
<span class="six">门槛</span>
<img class="seven" src="five.jpg" alt="">
</div>
<div>
<span class="six">难易程度</span>
<img class="seven" src="five.jpg" alt="">
<img class="seven" src="five.jpg" alt="">
</div>
</div>
<div class="intreduce3">
<div class="mid">
<span class="six">成长周期</span
><span class="red">1-3</span
><span>年</span>
</div>
<div>
<span class="six">稀缺程度</span
><span class="red">345</span
><span>家公司需要</span>
</div>
</div>
<div class="intreduce4">
<div class="serve">
<div>
<span class="six">薪资待遇</span>
</div>
</div>
<div class="content5">
<div class="one">
<span class="three">0-1年</span>
<span class="four">5k-10k/月</span>
</div>
<div  class="one">
<span class="three">1-3年</span>
<span class="four">10k-20k/月</span>
</div>
<div class="two">
<span class="three">3-年</span>
<span class="four">20k-50k/月</span>
</div>
</div>
</div>
<div class="intreduce5">
<h3>有<span class="red">286</span>人正在学习</h3>
</div>
<div class="intreduce6">
<p class="six">提示:在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</p>
</div>
</li>
</div>
</div>
</main>