bootstrap的使用

最新推荐文章于 2022-09-18 11:36:42 发布

原创最新推荐文章于 2022-09-18 11:36:42 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用Bootstrap框架修改网页样式，包括安装方法、表格样式调整及响应式设计技巧。通过不同类名，实现表格的hover效果、条纹样式、边框显示等，并展示如何创建响应式表格。

bootstrap的使用

bootstarp改变页面的样式是通过类进行修改的，首先需要对bootstrap进行安装

 <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

这种是通过cdn进行引入，

表格学习：

<table class="table">
  ...
</table>

例如这种就表示这个额是一个表格，然后会根据table类中的样式进行加载，在class中加上如下就会出现相应的效果

table-hover    表示鼠标进入的时候颜色会发生改变

table-condensed  紧缩表格

table-bordered  给表格每行加上每列加上格子线

table-striped  给表格每行加上条纹样式

也也可以给每行独立加上标签变成想要的颜色：

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

效果：


bootstrap常用的颜色通常都是通过active，success,warning,danger,info,defalut,这些来进行弄的，例如按钮的颜色：

    <button class="btn btn-primary">查看</button>
    <button class="btn btn-danger">取消</button>
    <button class="btn btn-warning">警告</button>
    <button class="btn btn-success">成功</button>
    <button class="btn btn-info">info</button>
<button class="btn btn-default">default</button>

效果：

如果想表格变成相应式表格的话就需要采用另外的方式进行，所谓相应的表格，就是随便屏幕的改变。，会出现一条拉动的条纹

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

需要加上如上类进行包装，才可以进行相应式表格

posted @ 2019-02-26 13:46 动手的程序员阅读( ...) 评论( ...) 编辑收藏