引入使用bootstrap

一：可以通过下载源文件代码。
二：跳过下载文件的操作，直接在你的项目中使用 Bootstrap 编译过的 CSS 和 JS 文件

css引入

  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

js与bootstrap 引入

  1. <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  2. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

注意：bootstrap需要配合jquery使用，在引入bootstrap.js前需要引入jquery.js

表格样式

  1. <div class="container">
  2.         <div class="page-header">
  3.             <h3>基本表格</h3>
  4.         </div>
  5.         <!-- 基本表格:只需要在表格中table 加一个table类 -->
  6.         <table class="table">
  7.             <thead>
  8.                 <tr>
  9.                     <th>#</th>
  10.                     <th>First Name</th>
  11.                     <th>Last Name</th>
  12.                     <th>Username</th>
  13.                 </tr>
  14.             </thead>
  15.             <tbody>
  16.                 <tr>
  17.                     <th>1</th>
  18.                     <td>Mark</td>
  19.                     <td>Otto</td>
  20.                     <td>@mdo</td>
  21.                 </tr>
  22.                 <tr>
  23.                     <th>2</th>
  24.                     <td>Jacob</td>
  25.                     <td>Thornton</td>
  26.                     <td>@fat</td>
  27.                 </tr>
  28.                 <tr>
  29.                     <th>3</th>
  30.                     <td>Larry</td>
  31.                     <td>the Bird</td>
  32.                     <td>@twitter</td>
  33.                 </tr>
  34.             </tbody>
  35.         </table>
  36.         <div class="page-header">
  37.             <h3>设置深色背景颜色</h3>
  38.         </div>
  39.         <table class="table table-dark">
  40.             <thead>
  41.                 <tr>
  42.                     <th>#</th>
  43.                     <th>First Name</th>
  44.                     <th>Last Name</th>
  45.                     <th>Username</th>
  46.                 </tr>
  47.             </thead>
  48.             <tbody>
  49.                 <tr>
  50.                     <th>1</th>
  51.                     <td>Mark</td>
  52.                     <td>Otto</td>
  53.                     <td>@mdo</td>
  54.                 </tr>
  55.                 <tr>
  56.                     <th>2</th>
  57.                     <td>Jacob</td>
  58.                     <td>Thornton</td>
  59.                     <td>@fat</td>
  60.                 </tr>
  61.                 <tr>
  62.                     <th>3</th>
  63.                     <td>Larry</td>
  64.                     <td>the Bird</td>
  65.                     <td>@twitter</td>
  66.                 </tr>
  67.             </tbody>
  68.         </table>
  69.         <div class="page-header">
  70.             <h3>为表头设置浅色（深色）颜色</h3>
  71.         </div>
  72.         <table class="table">
  73.             <thead class="thead-dark">
  74.                 <tr>
  75.                     <th>#</th>
  76.                     <th>First Name</th>
  77.                     <th>Last Name</th>
  78.                     <th>Username</th>
  79.                 </tr>
  80.             </thead>
  81.             <tbody>
  82.                 <tr>
  83.                     <th>1</th>
  84.                     <td>Mark</td>
  85.                     <td>Otto</td>
  86.                     <td>@mdo</td>
  87.                 </tr>
  88.                 <tr>
  89.                     <th>2</th>
  90.                     <td>Jacob</td>
  91.                     <td>Thornton</td>
  92.                     <td>@fat</td>
  93.                 </tr>
  94.                 <tr>
  95.                     <th>3</th>
  96.                     <td>Larry</td>
  97.                     <td>the Bird</td>
  98.                     <td>@twitter</td>
  99.                 </tr>
  100.             </tbody>
  101.         </table>
  102.         <table class="table">
  103.             <thead class="thead-light">
  104.                 <tr>
  105.                     <th>#</th>
  106.                     <th>First Name</th>
  107.                     <th>Last Name</th>
  108.                     <th>Username</th>
  109.                 </tr>
  110.             </thead>
  111.             <tbody>
  112.                 <tr>
  113.                     <th>1</th>
  114.                     <td>Mark</td>
  115.                     <td>Otto</td>
  116.                     <td>@mdo</td>
  117.                 </tr>
  118.                 <tr>
  119.                     <th>2</th>
  120.                     <td>Jacob</td>
  121.                     <td>Thornton</td>
  122.                     <td>@fat</td>
  123.                 </tr>
  124.                 <tr>
  125.                     <th>3</th>
  126.                     <td>Larry</td>
  127.                     <td>the Bird</td>
  128.                     <td>@twitter</td>
  129.                 </tr>
  130.             </tbody>
  131.         </table>
  132.         <div class="page-header">
  133.             <h3>条纹状表格</h3>
  134.         </div>
  135.         <!-- 条纹状表格 :在table中加一个 .table-striped  类 -->
  136.         <table class="table table-striped">
  137.             <thead>
  138.                 <tr>
  139.                     <th>#</th>
  140.                     <th>First Name</th>
  141.                     <th>Last Name</th>
  142.                     <th>Username</th>
  143.                 </tr>
  144.             </thead>
  145.             <tbody>
  146.                 <tr>
  147.                     <th>1</th>
  148.                     <td>Mark</td>
  149.                     <td>Otto</td>
  150.                     <td>@mdo</td>
  151.                 </tr>
  152.                 <tr>
  153.                     <th>2</th>
  154.                     <td>Jacob</td>
  155.                     <td>Thornton</td>
  156.                     <td>@fat</td>
  157.                 </tr>
  158.                 <tr>
  159.                     <th>3</th>
  160.                     <td>Larry</td>
  161.                     <td>the Bird</td>
  162.                     <td>@twitter</td>
  163.                 </tr>
  164.             </tbody>
  165.         </table>
  166.         <div class="page-header">
  167.             <h3>带边框表格</h3>
  168.         </div>
  169.         <!-- 带边框表格:只需要在table中加一个 table-bordered 类 -->
  170.         <table class="table table-striped table-bordered">
  171.             <thead>
  172.                 <tr>
  173.                     <th>#</th>
  174.                     <th>First Name</th>
  175.                     <th>Last Name</th>
  176.                     <th>Username</th>
  177.                 </tr>
  178.             </thead>
  179.             <tbody>
  180.                 <tr>
  181.                     <th>1</th>
  182.                     <td>Mark</td>
  183.                     <td>Otto</td>
  184.                     <td>@mdo</td>
  185.                 </tr>
  186.                 <tr>
  187.                     <th>2</th>
  188.                     <td>Jacob</td>
  189.                     <td>Thornton</td>
  190.                     <td>@fat</td>
  191.                 </tr>
  192.                 <tr>
  193.                     <th>3</th>
  194.                     <td>Larry</td>
  195.                     <td>the Bird</td>
  196.                     <td>@twitter</td>
  197.                 </tr>
  198.             </tbody>
  199.         </table>
  200.         <div class="page-header">
  201.             <h3>没有边框表格</h3>
  202.         </div>
  203.         <!-- 带边框表格:只需要在table中加一个 table-borderless 类 -->
  204.         <table class="table table-borderless">
  205.             <thead>
  206.                 <tr>
  207.                     <th>#</th>
  208.                     <th>First Name</th>
  209.                     <th>Last Name</th>
  210.                     <th>Username</th>
  211.                 </tr>
  212.             </thead>
  213.             <tbody>
  214.                 <tr>
  215.                     <th>1</th>
  216.                     <td>Mark</td>
  217.                     <td>Otto</td>
  218.                     <td>@mdo</td>
  219.                 </tr>
  220.                 <tr>
  221.                     <th>2</th>
  222.                     <td>Jacob</td>
  223.                     <td>Thornton</td>
  224.                     <td>@fat</td>
  225.                 </tr>
  226.                 <tr>
  227.                     <th>3</th>
  228.                     <td>Larry</td>
  229.                     <td>the Bird</td>
  230.                     <td>@twitter</td>
  231.                 </tr>
  232.             </tbody>
  233.         </table>
  234.         <div class="page-header">
  235.             <h3>鼠标悬停效果</h3>
  236.         </div>
  237.         <!-- 鼠标悬停效果:只需要在table中加一个 table-hover 类 -->
  238.         <table class="table table-bordered table-hover">
  239.             <thead>
  240.                 <tr>
  241.                     <th>#</th>
  242.                     <th>First Name</th>
  243.                     <th>Last Name</th>
  244.                     <th>Username</th>
  245.                 </tr>
  246.             </thead>
  247.             <tbody>
  248.                 <tr>
  249.                     <th>1</th>
  250.                     <td>Mark</td>
  251.                     <td>Otto</td>
  252.                     <td>@mdo</td>
  253.                 </tr>
  254.                 <tr>
  255.                     <th>2</th>
  256.                     <td>Jacob</td>
  257.                     <td>Thornton</td>
  258.                     <td>@fat</td>
  259.                 </tr>
  260.                 <tr>
  261.                     <th>3</th>
  262.                     <td>Larry</td>
  263.                     <td>the Bird</td>
  264.                     <td>@twitter</td>
  265.                 </tr>
  266.             </tbody>
  267.         </table>
  268.         <div class="page-header">
  269.             <h3>紧缩表格</h3>
  270.         </div>
  271.         <!-- 紧缩表格:只需要在table中加一个 table-sm 类 -->
  272.         <table class="table table-bordered table-sm">
  273.             <thead>
  274.                 <tr>
  275.                     <th>#</th>
  276.                     <th>First Name</th>
  277.                     <th>Last Name</th>
  278.                     <th>Username</th>
  279.                 </tr>
  280.             </thead>
  281.             <tbody>
  282.                 <tr>
  283.                     <th>1</th>
  284.                     <td>Mark</td>
  285.                     <td>Otto</td>
  286.                     <td>@mdo</td>
  287.                 </tr>
  288.                 <tr>
  289.                     <th>2</th>
  290.                     <td>Jacob</td>
  291.                     <td>Thornton</td>
  292.                     <td>@fat</td>
  293.                 </tr>
  294.                 <tr>
  295.                     <th>3</th>
  296.                     <td class="danger">Larry</td>
  297.                     <td>the Bird</td>
  298.                     <td>@twitter</td>
  299.                 </tr>
  300.             </tbody>
  301.         </table>
  302.         <div class="page-header">
  303.             <h3>状态类</h3>
  304.             <p>.table-light .table-active .table-success .table-info .table-warning .table-danger table-secondary</p>
  305.         </div>
  306.         <!-- 状态类:需要在tr\td中为每一个行加一个不同的颜色 .active .success .info .warning .danger -->
  307.         <table class="table table-bordered table-hover">
  308.             <thead>
  309.                 <tr class="table-active">
  310.                     <th>#</th>
  311.                     <th>First Name</th>
  312.                     <th>Last Name</th>
  313.                     <th>Username</th>
  314.                 </tr>
  315.             </thead>
  316.             <tbody>
  317.                 <tr>
  318.                     <th>1</th>
  319.                     <td>Mark</td>
  320.                     <td>Otto</td>
  321.                     <td>@mdo</td>
  322.                 </tr>
  323.                 <tr class="table-success">
  324.                     <th>2</th>
  325.                     <td>Jacob</td>
  326.                     <td>Thornton</td>
  327.                     <td>@fat</td>
  328.                 </tr>
  329.                 <tr>
  330.                     <th>1</th>
  331.                     <td>Mark</td>
  332.                     <td>Otto</td>
  333.                     <td>@mdo</td>
  334.                 </tr>
  335.                 <tr class="table-light">
  336.                     <th>2</th>
  337.                     <td>Jacob</td>
  338.                     <td>Thornton</td>
  339.                     <td>@fat</td>
  340.                 </tr>
  341.                 <tr>
  342.                     <th>3</th>
  343.                     <td>Larry</td>
  344.                     <td>the Bird</td>
  345.                     <td>@twitter</td>
  346.                 </tr>
  347.                 <tr class="table-info">
  348.                     <th>4</th>
  349.                     <td>Jacob</td>
  350.                     <td>Thornton</td>
  351.                     <td>@fat</td>
  352.                 </tr>
  353.                 <tr>
  354.                     <th>5</th>
  355.                     <td>Jacob</td>
  356.                     <td>Thornton</td>
  357.                     <td>@fat</td>
  358.                 </tr>
  359.                 <tr class="table-warning">
  360.                     <th>6</th>
  361.                     <td>Jacob</td>
  362.                     <td>Thornton</td>
  363.                     <td>@fat</td>
  364.                 </tr>
  365.                 <tr>
  366.                     <th>7</th>
  367.                     <td>Jacob</td>
  368.                     <td>Thornton</td>
  369.                     <td>@fat</td>
  370.                 </tr>
  371.                 <tr class="table-danger">
  372.                     <th>8</th>
  373.                     <td>Jacob</td>
  374.                     <td>Thornton</td>
  375.                     <td>@fat</td>
  376.                 </tr>
  377.                 <tr>
  378.                     <th>9</th>
  379.                     <td>Jacob</td>
  380.                     <td>Thornton</td>
  381.                     <td>@fat</td>
  382.                 </tr>
  383.                 <tr class="table-secondary">
  384.                     <th>10</th>
  385.                     <td>Jacob</td>
  386.                     <td>Thornton</td>
  387.                     <td>@fat</td>
  388.                 </tr>
  389.             </tbody>
  390.         </table>
  391.         <div class="page-header">
  392.             <h3>响应式表格</h3>
  393.             <p>当表格适应小屏幕时,表格出现单独水平滚动条</p>
  394.         </div>
  395.         <!-- 响应式表格:只需要在table 外的包裹元素内加一个table-responsive  类 -->
  396.         <div class="table-responsive">
  397.             <table class="table table-bordered table-hover">
  398.                 <thead>
  399.                     <tr>
  400.                         <th>#</th>
  401.                         <th>First Name</th>
  402.                         <th>Last Name</th>
  403.                         <th>Username</th>
  404.                     </tr>
  405.                 </thead>
  406.                 <tbody>
  407.                     <tr>
  408.                         <th>1</th>
  409.                         <td>Mark</td>
  410.                         <td>Otto</td>
  411.                         <td>@mdo</td>
  412.                     </tr>
  413.                     <tr>
  414.                         <th>2</th>
  415.                         <td>Jacob</td>
  416.                         <td>Thornton</td>
  417.                         <td>@fat</td>
  418.                     </tr>
  419.                     <tr>
  420.                         <th>3</th>
  421.                         <td class="danger">Larry</td>
  422.                         <td>the Bird</td>
  423.                         <td>@twitter</td>
  424.                     </tr>
  425.                 </tbody>
  426.             </table>
  427.         </div>
  428.     </div>

分页样式

  1. <div class="container">
  2.         <div class="page-header">
  3.             <h2>分页样式</h2>
  4.         </div>
  5.         <!-- 增加分页样式 class="pagination" -->
  6.         <!-- page-item 分页按钮 需要与page-link 配合使用 -->
  7.         <ul class="pagination">
  8.             <li class="page-item"><a href="#" class="page-link">Previous</a></li>
  9.             <li class="page-item"><a href="#" class="page-link">1</a></li>
  10.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  11.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  12.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  13.         </ul>
  15.         <div class="page-header">
  16.             <h2>增加默认选中样式</h2>
  17.         </div>
  18.         <ul class="pagination">
  19.             <li class="page-item"><a href="#" class="page-link">Previous</a></li>
  20.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  21.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  22.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  23.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  24.         </ul>
  25.         <div class="page-header">
  26.             <h2>禁用模式</h2>
  27.         </div>
  28.         <ul class="pagination">
  29.             <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
  30.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  31.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  32.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  33.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  34.         </ul>
  35.         <div class="page-header">
  36.             <h2>小分页模式</h2>
  37.         </div>
  38.         <ul class="pagination pagination-sm">
  39.             <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
  40.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  41.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  42.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  43.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  44.         </ul>
  45.         <div class="page-header">
  46.             <h2>大分页模式</h2>
  47.         </div>
  48.         <ul class="pagination pagination-lg">
  49.             <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
  50.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  51.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  52.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  53.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  54.         </ul>
  55.         <div class="page-header">
  56.             <h2>对齐方式--居中</h2>
  57.         </div>
  58.         <ul class="pagination justify-content-center ">
  59.             <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
  60.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  61.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  62.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  63.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  64.         </ul>
  65.         <div class="page-header">
  66.             <h2>对齐方式--居右</h2>
  67.         </div>
  68.         <ul class="pagination justify-content-end ">
  69.             <li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
  70.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  71.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  72.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  73.             <li class="page-item"><a href="#" class="page-link">Next</a></li>
  74.         </ul>
  75.         <div class="page-header">
  76.             <h2>前后使用图标</h2>
  77.         </div>
  78.         <ul class="pagination">
  79.             <li class="page-item disabled"><a href="#" class="page-link">&laquo;</a></li>
  80.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  81.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  82.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  83.             <li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
  84.         </ul>
  85.         <ul class="pagination">
  86.             <li class="page-item disabled"><a href="#" class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left" viewBox="0 0 16 16">
  87.                 <path d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"/>
  88.               </svg></a></li>
  89.             <li class="page-item active"><a href="#" class="page-link">1</a></li>
  90.             <li class="page-item"><a href="#" class="page-link">2</a></li>
  91.             <li class="page-item"><a href="#" class="page-link">3</a></li>
  92.             <li class="page-item"><a href="#" class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewBox="0 0 16 16">
  93.                 <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
  94.               </svg></a></li>
  95.         </ul>
  96.     </div>
效果展示

说说你对响应式布局和网格的理解

针对不同屏幕尺寸，自动适应显示的内容，一套代码，适应不同端的浏览。

更多相关文章

  1. bootstrap常用组件样式使用之，导航，列表，按钮
  2. 进入bootstrap的大门之表格
  3. 学习笔记：表格小知识
  4. 第二十一课 Bootstrap学习
  5. 演示文本操作、演示样式属性操作 、演示 效果操作、演示节点功能
  6. 演示文本操作3个功能+演示样式属性操作 3个功能+演示 效果操作 3
  7. 实例演示选择器的优先级,id,class,tag
  8. css_0630作业
  9. 表格的基本写法

随机推荐

  1. Android之view虚线
  2. CopyOnWriteArrayList,一个面试中经常问
  3. 面试官：如何分库分表？
  4. StampedLock如何使用？
  5. 【移动开发】 Android隐藏输入法软键盘的
  6. PriorityQueue：一个提升你刷题效率和解决
  7. CountDownLatch如何使用？
  8. 很好的一些开源项目
  9. CyclicBarrier如何使用？
  10. 面试官：如何实现一个乐观锁（小白都能看得懂