Bootstrap 基础组件（二）

最新推荐文章于 2024-06-25 11:45:24 发布
最新推荐文章于 2024-06-25 11:45:24 发布
阅读量126 收藏
点赞数 2
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64304422/article/details/138201520
版权

1.第一关

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <style>
      *{
      	margin: 0;
      	padding: 0;
      }
      .box{
         padding: 10px;
      }

    </style>
  </head>                                                                           
  <body>    
  <div class="box">

      <!---------- Begin ---------->
      <div class="table-responsive ">
         <table class="table table-bordered  table-hover">
            <thead>
               <td>序号</td>
               <td>姓名</td>
               <td>班级</td>
               <td>成绩</td>
            </thead>
            <tr class="success">
                <td>1</td>
                <td>张三</td>
                <td>1001</td>
                <td>92</td>
            </tr>
            <tr class="info">
                <td>2</td>
                <td>李四</td>
                <td>1002</td>
                <td>85</td>
            </tr>
            <tr class="active">
                <td>3</td>
                <td>王五</td>
                <td>1004</td>
                <td>70</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>赵六</td>
                <td>1005</td>
                <td>60</td>
            </tr>
            <tr class="danger">
                <td>3</td>
                <td>琪琪</td>
                <td>1006</td>
                <td>50</td>
            </tr>
         </table>
      </div>
      <!---------- End ---------->
      
  </div> 
  </body>
</html>

2.第二关

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>                                                                           
  <body>      
     <div style="margin:30px;">
       
       <!---------- begin ---------->

        <ol class="breadcrumb">
          <li><a href="#">HomePage</a></li>
          <li><a href="#">info</a></li>
          <li class="active">item</li>
        </ol>

        <button type="button" class="btn btn-danger" style="margin-bottom: 20px">消息
            <span class="badge">15</span>
        </button>

        <div class="alert alert-success" role="alert">成功信息</div>
        <div class="alert alert-info" role="alert">一般信息</div>
        <div class="alert alert-warning" role="alert">警告信息</div>
        <div class="alert alert-danger" role="alert">危险信息</div>
        
       <!---------- end ---------->   
     </div>
  </body>
</html>

3.第三关

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>                                                                           
  <body>      
    <div style="margin:30px;">
     <!---------- begin ---------->
      
        <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 4em; width: 4%">
                    2%
              </div>
              <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                    30%
              </div>

              <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                    30%
              </div>
              <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                    30%
              </div>
        </div>    
        
     <!---------- end ---------->   
     </div>
  </body>
</html>

勇敢小恒
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 基础组件
Junds0的博客
09-09 626
本关需要你掌握Bootstrap的下拉菜单。本关需要你掌握Bootstrap的字体图标。本关需要你掌握Bootstrap的导航。
bootstrap组件基础命名
Lioo121的博客
11-04 483
bootstrap 组件命名规范 一般 所有的基础类 都是清空默认样式 设置公共样式 图标：基础类 glyphicon 具体图标 glyhicon-xxx 下拉菜单 .dropdown 1.容器类名 .dropdown （下拉） .dropup(上拉) 只是改变dropdown-menu的位置 2.菜单类名 .dropdown-menu 3.显示隐藏 .dro...
bootstrap布局组件
weixin_44106237的博客
08-24 395
bootstrap布局组件
Bootstrap框架常用组件
橘猫吃不胖的博客
01-16 3105
Bootstrap框架常用组件1 组件基础1.1 什么是组件1.2 组件的优势2 Bootstrap常用组件2.1 按钮2.2 导航2.3 面包屑导航2.4 分页2.5 列表2.6 表单2.7 按钮组2.8 输入框组3 Bootstrap实现菜单功能3.1 折叠菜单3.2 下拉菜单4 Bootstrap实现轮播图功能4.1 什么是轮播图4.2 轮播图的功能分析4.3 轮播图活动信息4.4 轮播图左侧箭头4.5 轮播图右箭头4.6 轮播图指示器4.7 全部代码 1 组件基础 1.1 什么是组件 组件是一个抽象
Bootstrap常用组件（二）
小王的博客
08-05 626
BootStrap组件中字体图标、下拉菜单、按钮组、输入框组、导航、分页等组件的使用
BootStrap4：组件
分享日常工作技术
03-29 1715
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。
Bootstrap框架（组件）
passerby的博客
07-27 1979
根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片 这一章我们来讲一下一些组件无处不在的字体图标 如图： 它们在APP页面底部、网站导航条、登录页面或注册页面 Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上 按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离 在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式 翻页只能实现
3.Bootstrap组件
wxhua420701325的博客
10-25 1545
栅格系统。
Bootstrap的卡片组件相关知识
昊虹AI笔记
10-22 1440
Bootstrap的卡片组件相关知识
BootStrap整体框架之基础布局组件
08-31
主要为大家详细介绍了BootStrap整体框架之基础布局组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
全面解析Bootstrap布局组件应用
09-02
5. **响应式布局**：Bootstrap的网格系统是其响应式布局的基础，通过`.container`、`.row`和`.col-*-*`类，开发者可以灵活地控制内容在不同屏幕尺寸下的排列方式。例如，`.col-md-4`表示在中等屏幕尺寸下占据12列的4...
浅析Bootstrap组件之面板组件
09-02
除了基础样式，Bootstrap面板组件还支持多种颜色主题，以适应不同的设计需求和情境。这些预设的主题包括： 1. `.panel-primary` - 主要颜色，通常是蓝色，用于突出重要的信息。 2. `.panel-success` - 成功颜色，...
Bootstrap CSS组件之分页(pagination)和翻页(pager)
08-31
Bootstrap 是一款流行的前端开发框架，它提供了一系列丰富的CSS和JavaScript组件，使得开发者能够快速构建响应式、移动优先的网页。在Bootstrap中，分页（pagination）和翻页（pager）是两种用于处理大量数据分块...
Bootstrap基础视频教程
07-22
内容包括Bootstrap起步、Bootstrap全局css样式概览、Bootstrap全局css样式_栅格、Bootsrtap全局css样式_排版、Bootstrap全局css样式_代码、Bootstrap组件_字体图标、Bootstrap组件_按钮组等。 资源太大，传百度网盘...
日常工作记录目录
与海
06-21 683
EasyExcel实现二维码下载与展示
前端 CSS 经典：文字描边
weixin_64684095的博客
06-24 340
文字描边有两种实现方式。
SPECweb2009调优指南
最新发布
developersupport的博客
06-25 791
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
bootstrap基础教程第二版 源代码
02-05
《Bootstrap基础教程第二版》是一本介绍如何使用Bootstrap框架构建网站的教程书籍。它详细介绍了Bootstrap框架的基本概念、各种组件、布局、网站响应式设计等内容。书中还附带了大量源代码供读者学习和实践。 源...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值