Web前端之BootStrap（3）

2019-09-08 11:04:43 阅读：264 来源： 互联网

标签：scss Web node sass 前端 BootStrap carousel div css

一.常用组件
1.卡片
1.外层div通过.card来构建一个卡片
2.内部有三部分card-header card-body card-footer
3.内容的三部分可以省略

2.手风琴(卡片+折叠)

3.媒体对象
Bootstrap提供了很多类来处理媒体对象(图片和视频)和内容的布局
应用场合，博客的评论，论坛的帖子，商品的列表

总结：

4.轮播图 1.创建轮播 carousel 旋转木马，要想让图动起来，需要data-ride.设置动的方式，carousel 2.所有的轮播图，统一放在carousel-inner中 3.每一张图片，单独放在一个carousel-item中,carousel-item设置了display:none 4.需要给某一个carousel-item设置active,图片才能显示

导航指示器

1.ul要添加carousel-indicators
2…carousel-indicators li{横向弹性，去点，给了宽高，背景色，水平居中}
3. .carousel-indicators .active 选中的背景色变为#fff
4.点击事件data-slide-to=“n” n代表滑动到具体第n个图片(n从0开始)
5.在div.carousel中设置id#demo
给指示器设置点击后改变的目标轮播id
data-target="#demo"
6.boot提供的样式不符合我们的设计需求，需要自定义样式，重写boot的样式
/重写boot的样式，修改指示器宽高和背景/
.carousel-indicators li{
width:10px;height:10px;
background-color:#fff;
border-radius: 50%;
}
/指示器被选中状态的重写/
.carousel-indicators .active {
background-color: #0aa1ed;
}
左右箭头

1.两个a标签，要添加类carousel-control-prev/next
2.a标签中添加是span，调用boot提供的箭头图片
span.carousel-control-prev/next-icon
3.a标签的点击事件data-slide=“prev/next”
4.事件的目标 a.href="#整个轮播图的id"
练习：在中午完成的联系上添加左右箭头
5.模态框
modal,模态框是覆盖在父窗体上的子窗体
模态框可以在不离开父窗体的情况，与用户进行交互

1.打开模态框的按钮

2.模态框，先写3层div

-----负责固定定位 -----响应式布局 ---弹性布局

      </div>
 </div>

3.在div.modal-content中 div.modal-header div.modal-body div.modal-footer 二.其他组件 1.徽章基本类 badge 颜色 badge-danger/warning。。。。胶囊徽章 badge-pill 2.巨幕在外层包裹添加类 jumbotron 有比较大的内边距和背景颜色 3.分页

<!--pagination弹性，横向 -->
<!--pagination-sm第一个li和最后一个li的倒角-->
<!--这里的sm/lg 是分页栏大小，不是响应式-->
<ul class="pagination pagination-lg">
    <li class="page-item disabled">
        <a href="#" class="page-link">上一页</a>
    </li>
    <li class="page-item  active">
        <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">下一页</a>
    </li>
</ul>

1.ul设置类 pagination 负责弹性，横向显示
pagination-sm/lg 负责第一个li和最后一个li的倒角
2.ul>li.page-item>a.page-link
3.active选中和disabled禁用写在li中
4.面包屑导航
有层近关系的导航 breadcrumb
1.ul.breadcrumb>li.breadcrumb-item>a.无类名
2.修改面包屑导航中间的符号
.breadcrumb-item + .breadcrumb-item::before{
content:">";
}
5.进度条
1.进度条的槽
div.progress
2.在槽内部写进度
div.progress >div.progress-bar
3.可以给进度添加条纹
.progress-bar-striped
4.可以给进度添加动画
.progress-bar-animated
学习boot只需要熟练掌握3个内容
1.媒体查询
2.栅格布局
3.SCSS
三.SCSS,动态样式语言
把scss包.rar中4个文件复制到nodejs文件夹下
在ws中alt+f12
node-sass -v
node-sass 4.9.2 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
1.CSS的缺点
1.语法不够强大，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面的形式反复出现，导致难以维护
2.动态演示语言为css赋予了动态语言的特性，极大的提高了样式语言的可维护性
常见的动态样式语言
1.SCSS/Sass (scss兼容sass,更接近css的语法)
2.stylus
3.less—>生成boot3的动态样式语言
上述语言，都属于css的预处理器
用一种专门的编程语言，进行web页面样式设计
要通过编译器转化为正常的CSS文件，以供项目使用
2.什么是SCSS
SCSS是一款强化css的辅助工具
它在css语法的基础上，增加了变量，嵌套，混合，导入，函数的高级功能
这些拓展令CSS更加强大与优雅
3.scss的作用
有助于更好的管理样式文件，以及更高效的开发项目
4.SCSS的使用
1.在服务器端使用
2.安装scss编译程序
在线安装 npm install -g node-sass
本地安装把4个文件复制进nodejs文件夹
3.测试安装
在WebStorm中打开命令行界面 alt+f12
或者在nodejs的黑窗口中输入
node-sass -v 测试当前版本
注意，在node版本8.11以上才能使用
5.在命令行编译scss文件，转换成css文件
单文件的转换
正确路径>node-sass scss/01.scss css/01.css
多文件的转换
正确路径>node-sass scss -o css (scss文件夹中的scss文件，都转换成css文件中的样式文件)
单文件监听
node-sass -w scss/01.scss css/01.css
多文件监听
node-sass -w scss -o css
作业：
1.轮播

2.手风琴

3.scss转换成css

标签：scss,Web,node,sass,前端,BootStrap,carousel,div,css
来源： https://blog.csdn.net/lb569484787/article/details/100622197

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Web前端之BootStrap（3）