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

最新推荐文章于 2024-05-06 20:39:37 发布
最新推荐文章于 2024-05-06 20:39:37 发布
阅读量253 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhonghua_csdn/article/details/89877304
版权

今天尝试了下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
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于bootstrap的仿站练习01
web_zhuo的博客
05-12 2397
大家好,我是web卓,很高兴能和大家分享我的笔记. 话不多说,进入正题. 为了提升自己对bootstrap的使用与理解,我会 在接下来的一段时间,通过模仿优秀的页面,以 此来提升自己的技能,也希望大家能跟着我一起 来学习.... 优秀的程序猿不是靠看出来的,而是千万行代码 敲出来的! 这次我们要模仿的页面原网址为(http://www.bootcdn.cn/) 下面我们开始分析 第一部分:头部导
对于个人网站上的校园页面，其主要目的是展示你的校园经历、学术成果、活动参与以及与其他校园成员的联系
BLOG域名:programb.blog.csdn.net
07-04 3459
对于个人网站上的校园页面，其主要目的是展示你的校园经历、学术成果、活动参与以及与其他校园成员的联系。
Bootstrap基础练习28个样例（含代码）
04-30
自学的BootStrap,里面有28个基础样例（Css + jquery），Index.html目录起，适合开发时，忘记了，拿过来就用
bootstrap小练习
qq_54998648的博客
05-25 321
bootstrap提供的许多功能需要去慢慢了解，在项目中实战即可。这里将进行一个简单的表单制作。 用户登录表单 1.使用bootstrap进行响应式布局； 2.使用选项卡(tab)进行不同功能区的切换； 3.使用form-horizontal和form-group类进行表单布局； 4.使用form-control类美化表单控件； 5.使用btn btn-success等类美化按钮； 6.使用glyphicon设立图标； <!doctype html> <.
Bootstrap框架--起步，全局样式
qq_28835447的博客
07-24 349
Bootstrap 框架学习基础：html ，css，JavaScript bootstrap学习重点：学习理解简单，但样式class众多，需要背class类名，上千个class类名，至少记住常用类名 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，是属于UI类框架。 Bootstrap框架分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap ...
【每日一练】96—Bootstrap实现一个响应式卡片效果
web前端开发
11-12 335
作者 | 杨小爱写在前面今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。现在，我们就来看一下今天这个练习的最终效果：看...
每日前端学习笔记
Wary_Lin的博客
04-18 264
​ 放大 ctrl +​ 缩小 Ctrl -
达内2016前端开发知识点总结--angularjs + bootStrap --4天+2天开饭啦
a36267862的博客
02-28 336
Angularjs day01 框架：优秀的可以重复使用的代码，单独提取并封装，提高代码的服用了、开发速度，并保证良好的浏览器的兼容性。 angularJS、phoneGap、Ionic、ZeptoJS、React。。。 判断框架：①它适用的场景 ②如何使用 ③遇到了问题怎么解决(维基百科、官网、论坛（stackoverflow）) 一、常用的设计原则和设计模...
前端day-08
m0_59882269的博客
07-10 237
昨日内容回顾 js事件 jQuery简介 jQuery选择器 今日内容概要 今天要把jQuery全部结束jQuery操作标签jQuery绑定事件jQuery补充知识点jQuery动画效果(了解)Bootstrap(前端框架)开头
ThinkPHP5家庭财务收支管理网站源码案例设计.zip
04-19
总结，这个基于ThinkPHP5的家庭财务收支管理网站源码案例，不仅为开发者提供了实战练习的机会，也为企业和个人财务管理提供了便利。无论是初学者还是有经验的开发者，都能从中获益，提升自己的技能水平。
2024年前端最全月薪15K起，岗位需求量一骑绝尘的Web前端开发如何入门？，当上项目经理才知道
2401_84617246的博客
05-06 791
你要学的是一个专业很强的技术，肯定不能盲目的学，要把所有的内容进行分块来学。每天的内容都是固定的。每天学习的量要差不多，然后完成每天的知识，并且把它掌握，每天做多少练习，完成什么作业，都要明确。14.说一下 Vue 和 React 的认识，做一个简单的对比。14.说一下 Vue 和 React 的认识，做一个简单的对比。15.Vue 的 nextTick 的原理是什么？15.Vue 的 nextTick 的原理是什么？3.你是如何理解 Vue 的响应式系统的?3.你是如何理解 Vue 的响应式系统的?
基于HTML+CSS+JavaScript+Bootstarp响应式健身网站(web前端期末大作业)
m0_73260518的博客
08-13 376
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
SSM框架【硬核】项目--个人理财管理系统项目教程
d586497的博客
02-10 1885
今天带大家动手实践一下SSM框架项目： 本系统采用SSM技术进行开发与设计，可以让学员对JavaEE的框架有个全面的认识，并能将实用技能与理论知识进行完美的结合，让学员知其然的同时，也要知其所以然。 ps： 服务端：Spring+SpringMVC+MyBatis框架整合 数据库：MySql8.0 web服务器：Tomcat 项目管理：Maven 前端：jQuery+BootStrap+JavaScript 开发工具：idea2020 第一章：介绍 个人理财系统，主要帮助用户管理个人.
1446-基于51单片机的气压检测（MPX4115,上位机，LCD）proteus，原理图、流程图、物料清单、仿真图、源代码
09-06
1446-基于51单片机的气压检测（MPX4115,上位机，LCD）proteus，原理图、流程图、物料清单、仿真图、源代码 资料介绍： 1、使用气压传感器MPX4115检测气压 2、利用LCD1602显示气压 3、把气压值上传到上位机 有哪些资料： 1、仿真工程文件 2、源代码工程文件 3、原理图工程文件 4、流程图 5、功能介绍 6、元件清单 7、上位机软件 8、演示视频
8051Proteus仿真c源码用定时器T0的中断实现长时间定时
09-06
8051Proteus仿真c源码用定时器T0的中断实现长时间定时提取方式是百度网盘分享地址
威纶通HMI登陆方式（二）：索引密码登陆
09-06
通过用户参数设置、高级安全模式控制地址的使用以及用户登陆界面的设计实现威纶通HMI索引密码登陆。
基于yolov8的抽烟检测系统python源码+onnx模型+评估指标曲线+精美GUI界面.zip
09-06
【测试环境】 windows10 anaconda3+python3.8 torch==1.9.0+cu111 ultralytics==8.2.70 【模型可以检测出类别】 cig-pack smoke 更多实现细节参考博文：https://blog.csdn.net/FL1623863129/article/details/141964642
epoll+线程池实现的高并发服务器
最新发布
09-06
epoll+线程池实现的高并发服务器
2016前端框架深度解析：Bootstrap与html5-boilerplate
在2016年的前端开发领域，Bootstrap和html5-boilerplate是最具代表性的两个框架。 Bootstrap，当前版本为v3.3.6，是一个广泛使用的前端框架，拥有丰富的组件库，如Glyphicons图标、下拉菜单、按钮组、输入组、导航...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值