Web前端之BootStrap（3）

2024-02-21 08:14:34

一.常用组件
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

码农公寓

相关文章