头歌（Educoder）——Web前端课程设计——前端基础答案

最新推荐文章于 2025-12-06 22:07:37 发布

原创

最新推荐文章于 2025-12-06 22:07:37 发布 · 307 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Bootstrap入门

第1关 Bootstrap入门

第2关 Bootstrap按钮的样式及状态

第2关 Bootstrap 路径导航、徽章、警告框

第3关 Bootstrap 进度条

Bootstrap入门

第1关 Bootstrap入门

<!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;">
       <button>原生按钮</button>
       <!---------- begin ---------->

       <button class="btn btn-success" >Bootstrap成功按钮</button>
       <a class="btn btn-danger" >Bootstrap危险按钮</a>
    
       <!---------- end ---------->   
     </div>
  </body>
</html>

第2关 Bootstrap按钮的样式及状态

<!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;">
       <button class="btn btn-success btn-sm disabled">绿色成功 禁用状态的小按钮</button>
       <!---------- begin ---------->

       <button class="btn btn-danger btn-lg" >红色危险 大按钮</button>
       <a class="btn btn-warning btn-sm disabled" >橙色警告 禁用状态 小按钮</a>
    
       <!---------- end ---------->   
     </div>
  </body>
</html>

第3关 Bootstrap按钮组

<!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="btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-danger">危险</button>
    </div>

    
     <!---------- end ---------->   
     </div>
  </body>
</html>