每日一点前端-5-bootstrap小练习

最新推荐文章于 2023-04-18 17:35:20 发布
原创 最新推荐文章于 2023-04-18 17:35:20 发布 · 314 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文通过实际操作介绍了Bootstrap组件的使用方法，包括自定义滚动条样式、创建不同样式的表格及表单元素等，为读者提供了丰富的代码示例。

今天尝试了下bootstrap组件的使用，感觉跟之前使用的semantic UI差不多，还有好多没有尝试，在界面上我感觉都大同小异，也不知道是不是还有不多不同的地方我还没有探索到。不过听说以后我们要用esay UI，有空的时候再试试那个上面的例子。

2789632-05040f3df5412560.png
bootstrap小练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        /*<!--::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的-->*/
        /*::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的*/
        /*::-webkit-scrollbar-track  外层轨道*/
        /*::-webkit-scrollbar-track-piece  内层滚动槽*/
        /*::-webkit-scrollbar-thumb 滚动的滑块*/
        /*::-webkit-scrollbar-corner 边角*/
        /*::-webkit-resizer 定义右下角拖动块的样式*/
        ::-webkit-scrollbar{width:10px;background-color: red;}
        ::-webkit-scrollbar{background-color:pink;border-radius: 10px;width: 8px;height: 8px;}
        ::-webkit-scrollbar-track{background-color: #2a6496;}
        ::-webkit-scrollbar-track-piece{background-color: red;}
        ::-webkit-scrollbar-thumb{background-color: black;}
        ::-webkit-scrollbar-corner{color: blue;}
    </style>
</head>
<body>
    <h5>bootstrap里的滚动条的使用</h5>
    <pre class="pre-scrollable">
        <ol>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
            <li>出现滚动条吧</li>
        </ol>

    </pre>
<div class="text-center">好像还不错的样子！</div>
<h3>表格</h3>
<h5>基础表格</h5>
    <table class="table">
        <th>表格标题1</th>
        <th>表格标题2</th>
        <th>表格标题3</th>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>

    <h5>斑马线表格</h5>
    <table class="table table-striped">
        <th>表格标题1</th>
        <th>表格标题2</th>
        <th>表格标题3</th>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>

    <h5>带边框的表格</h5>
    <table class="table table-striped table-bordered">
        <th>表格标题1</th>
        <th>表格标题2</th>
        <th>表格标题3</th>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>

    <h5>鼠标悬浮高亮表格</h5>
    <table class="table table-striped table-bordered table-hover">
        <th>表格标题1</th>
        <th>表格标题2</th>
        <th>表格标题3</th>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>

    <h5>紧凑型表格</h5>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <th>表格标题1</th>
        <th>表格标题2</th>
        <th>表格标题3</th>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
    <h5>响应式表格</h5>
    <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <th>表格标题1</th>
        <th>表格标题2</th>
        <th>表格标题3</th>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.333333333333333333333333333333333333333333</td>
        </tr>
    </table>
        </div>

    <h5>表格-行控制</h5>
        <table class="table table-striped table-bordered">
            <th>表格标题1</th>
            <th>表格标题2</th>
            <th>表格标题3</th>
            <tr class="active">
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
            </tr>
            <tr class="success">
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
            </tr>
            <tr class="info">
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
            </tr>
            <tr class="waring">
                <td>4.1</td>
                <td>4.2</td>
                <td>4.3</td>
            </tr>
            <tr class="danger">
                <td>5.1</td>
                <td>5.2</td>
                <td>5.3</td>
            </tr>
        </table>
    <h5>基础表单</h5>
        <form role="form">
            <div class="form-group">
                <label for="exampleInputEmail1">邮箱：</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱"/>
            </div>
            <div class="form-group">
                <label for="examplePassword1">密码</label>
                <input type="password" class="form-control" id="examplePassword1" placeholder="请输入密码"/>
            </div>

        </form>
        <input type="checkbox">记住密码
        <button type="submit" class="btn btn-default">登录邮箱</button>

    <h5>水平表单</h5>
    <form role="form" class="form-horizontal" >
        <div class="form-group">
            <label for="exampleInputEmail2" class="col-sm-2 control-label">邮箱：</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱"/>
            </div>
        </div>
        <div class="form-group">
            <label for="examplePassword2" class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="examplePassword2" placeholder="请输入密码"/>
            </div>
        </div>

    </form>

    <h5>水平表单</h5>
    <form role="form" class="inline" >
        <div class="form-group">
            <label for="exampleInputEmail3" class="col-sm-2 control-label">邮箱：</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="exampleInputEmail3" placeholder="请输入邮箱"/>
            </div>
        </div>
        <div class="form-group">
            <label for="examplePassword3" class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="examplePassword3" placeholder="请输入密码"/>
            </div>
        </div>

    </form>
    <h5>下拉列表</h5>
    <form>
        <div class="form-group">
        <select class="form-control">
            <option>语文</option>
            <option>数学</option>
            <option>英语</option>
            <option>物理</option>
        </select>
            </div>
        <div class="form-group">
            <select multiple class="form-control">
                <option>语文</option>
                <option>数学</option>
                <option>英语</option>
                <option>物理</option>
            </select>
        </div>
    </form>
<button class="btn">btn</button>
<button class="btn btn-primary">btn btn-primary</button>
<button class="btn btn-default">btn btn-default</button>
<button class="btn btn-block">btn btn-block</button>
<button class="btn btn-danger">btn btn-danger</button>
<button class="btn btn-link">btn btn-link</button>
<button class="btn btn-info">btn btn-info</button>
<button class="btn btn-success">btn btn-success</button>
<br/><br/><br/><br/>
</body>
</html>
2789632-3b18269684ea9294.png
公众号.png
基于bootstrap的仿站练习01
web_zhuo的博客
05-12 2470
大家好,我是web卓,很高兴能和大家分享我的笔记. 话不多说,进入正题. 为了提升自己对bootstrap的使用与理解,我会 在接下来的一段时间,通过模仿优秀的页面,以 此来提升自己的技能,也希望大家能跟着我一起 来学习.... 优秀的程序猿不是靠看出来的,而是千万行代码 敲出来的! 这次我们要模仿的页面原网址为(http://www.bootcdn.cn/) 下面我们开始分析 第一部分:头部导
Bootstrap基础练习28个样例（含代码）
04-30
自学的BootStrap,里面有28个基础样例（Css + jquery），Index.html目录起，适合开发时，忘记了，拿过来就用
bootstrap小练习
qq_54998648的博客
05-25 391
bootstrap提供的许多功能需要去慢慢了解，在项目中实战即可。这里将进行一个简单的表单制作。 用户登录表单 1.使用bootstrap进行响应式布局； 2.使用选项卡(tab)进行不同功能区的切换； 3.使用form-horizontal和form-group类进行表单布局； 4.使用form-control类美化表单控件； 5.使用btn btn-success等类美化按钮； 6.使用glyphicon设立图标； <!doctype html> <.
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
修改bootstrap 滚轴颜色
秋风伴落叶
01-23 1015
-webkit-scrollbar { width: 12px;} -webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0px white;} -webkit-scrollbar-thumb { border-radius: 10px; background: white; -webkit-box-shadow: ins
【每日一练】96—Bootstrap实现一个响应式卡片效果
web前端开发
11-12 439
作者 | 杨小爱写在前面今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。现在，我们就来看一下今天这个练习的最终效果：看...
每日前端学习笔记
Wary_Lin的博客
04-18 1039
​ 放大 ctrl +​ 缩小 Ctrl -
CSS每日一题 - 提升前端技能
资源摘要信息:"每日一题：CSS知识点...结合每日一题的实践方式，不仅能够确保知识的持续积累和应用能力的逐步提升，而且还能够培养出良好的学习习惯和对新技术的敏感度，为成为一个全面的前端开发人员打下坚实的基础。
基于Bootstrap与jQuery的每日工作计划程序
本项目“Homework-week-5”是一个基于前端技术栈的交互式工作日安排程序，旨在帮助用户高效管理每日任务与重要事件。该项目综合运用了HTML、CSS、Bootstrap、jQuery以及Moment.js等主流前端技术，并通过调用第三方...
每日30分钟持续学习，一年掌握前端开发核心技术
而Bootstrap作为一个流行的前端框架，极大提升了UI组件的开发效率，尤其适合构建跨设备兼容的响应式网站。JavaScript作为唯一能在浏览器端原生运行的编程语言，承担了交互逻辑的实现任务，是动态网页的灵魂所在。 ...
H-ui.admin v3.0 前端架构深度揭秘：5大模块化设计原则与核心技术选型逻辑
H-ui.admin v3.0 作为面向中后台场景的轻量级前端框架，其架构设计深度融合了模块化思想与经典软件设计原则。本文系统阐述了该框架的架构全景与设计哲学，重点解析了基于高内聚低耦合的模块拆分策略、事
基于Bootstrap与jQuery的工作日程安排器
该项目的核心目标是让用户能够在一个可视化的日历界面中添加、查看和管理每日任务，并将这些任务数据持久化存储在浏览器的`localStorage`中，利用JSON格式进行序列化与反序列化操作。整个系统基于HTML、CSS和...
Bootstrap框架--起步，全局样式
qq_28835447的博客
07-24 397
Bootstrap 框架学习基础：html ，css，JavaScript bootstrap学习重点：学习理解简单，但样式class众多，需要背class类名，上千个class类名，至少记住常用类名 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，是属于UI类框架。 Bootstrap框架分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap ...
对于个人网站上的校园页面，其主要目的是展示你的校园经历、学术成果、活动参与以及与其他校园成员的联系
BLOG域名:programb.blog.youkuaiyun.com
07-04 3702
对于个人网站上的校园页面，其主要目的是展示你的校园经历、学术成果、活动参与以及与其他校园成员的联系。
bootstrap 简单练习（后续把其它页面也进行练习）
weixin_30708329的博客
04-26 384
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&...
【顶级EI复现】【最新EI复现】基于共享储能服务的智能楼宇双层优化配置（Matlab代码实现）
11-25
【顶级EI复现】【最新EI复现】基于共享储能服务的智能楼宇双层优化配置（Matlab代码实现）
好大夫在线-问诊数据-医生ID：1010632293
最新发布
11-25
医生ID：1010632293的 2023-10-30 至 2025-11-21 的问诊列表数据
基于Python与OpenCV的实时人眼检测与眨眼状态识别系统实现
11-25
本指南详细阐述基于Python编程语言结合OpenCV计算机视觉库构建实时眼部状态分析系统的技术流程。该系统能够准确识别眼部区域，并对眨眼动作与持续闭眼状态进行判别。OpenCV作为功能强大的图像处理工具库，配合Python简洁的语法特性与丰富的第三方模块支持，为开发此类视觉应用提供了理想环境。 在环境配置阶段，除基础Python运行环境外，还需安装OpenCV核心模块与dlib机器学习库。dlib库内置的HOG（方向梯度直方图）特征检测算法在面部特征定位方面表现卓越。 技术实现包含以下关键环节： - 面部区域检测：采用预训练的Haar级联分类器或HOG特征检测器完成初始人脸定位，为后续眼部分析建立基础坐标系 - 眼部精确定位：基于已识别的人脸区域，运用dlib提供的面部特征点预测模型准确标定双眼位置坐标 - 眼睑轮廓分析：通过OpenCV的轮廓提取算法精确勾勒眼睑边缘形态，为状态判别提供几何特征依据 - 眨眼动作识别：通过连续帧序列分析眼睑开合度变化，建立动态阈值模型判断瞬时闭合动作 - 持续闭眼检测：设定更严格的状态持续时间与闭合程度双重标准，准确识别长时间闭眼行为 - 实时处理架构：构建视频流处理管线，通过帧捕获、特征分析、状态判断的循环流程实现实时监控 完整的技术文档应包含模块化代码实现、依赖库安装指引、参数调优指南及常见问题解决方案。示例代码需具备完整的错误处理机制与性能优化建议，涵盖图像预处理、光照补偿等实际应用中的关键技术点。 掌握该技术体系不仅有助于深入理解计算机视觉原理，更为疲劳驾驶预警、医疗监护等实际应用场景提供了可靠的技术基础。后续优化方向可包括多模态特征融合、深度学习模型集成等进阶研究领域。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值