正文 

当前位置： 首页 > java > java框架

bootstrap之css全局样式中的表格

李亦华的博客      2022-02-13     237

关键词：

不使用BootStrap 之 CSS全局样式中的表格，自己也不定义CSS样式

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>东方不败</td>
        <td>男</td>
    </tr>
    <tr>
        <td>3</td>
        <td>五毒教主</td>
        <td>女</td>
    </tr>
</table>

效果如下：

img

使用BootStrap 之 CSS全局样式中的表格 —— .table

<table class="table">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>东方不败</td>
        <td>男</td>
    </tr>
    <tr>
        <td>3</td>
        <td>五毒教主</td>
        <td>女</td>
    </tr>
</table>

效果如下：

img

使用BootStrap 之 CSS全局样式中的表格 —— .table-striped

<table class="table table-striped">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>东方不败</td>
        <td>男</td>
    </tr>
    <tr>
        <td>3</td>
        <td>五毒教主</td>
        <td>女</td>
    </tr>
</table>

效果如下：

img

使用BootStrap 之 CSS全局样式中的表格 —— .table-bordered

<table class="table table-striped table-bordered">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>东方不败</td>
        <td>男</td>
    </tr>
    <tr>
        <td>3</td>
        <td>五毒教主</td>
        <td>女</td>
    </tr>
</table>

效果如下：

img

详情请查看：全局 CSS 样式

bootstrap之css全局样式中的图片

使用BootStrap中的CSS全局样式，我们就可以不用自己定义CSS样式了。响应式图片<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewp 查看详情

bootstrap全局css样式之排版

Bootstrap能全然友好的支持html5的文本元素，这里不再赘述，详细可參考我还有一篇文章《html的文本元素总结》，这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。.small——当前元素字体大小的85%，经常使用作副标题时，也可... 查看详情

bootstrap之css样式(代码片段)

一、表格　　bootstrap3.0规定，为任意<table>标签添加.table类样式，才可以为其赋予优化效果。bootstrap为表格添加了除默认风格外的个性风格。　　1.斑马线风格　　为表格添加如下样式，为表格添加table-striped样式类，即可实... 查看详情

python学习_day62_前端基础之bootstrap全局css样式

一、布局容器　　Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。分别为：<divclass="container">//.container... 查看详情

重修课程day54（bootstrap之css样式）

一bootstrap的介绍　Bootstrap是将html，css和js的代码打包好了，只管我们拿来调用。是基于jquery开发的。　使用BootCDN提供的免费CDN加速服务，同时支持http和https协议。CDN是一种前端的优化方式。　jquery的代码放在body标签里面的最下... 查看详情

javaweb之bootstrap(代码片段)

...数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScript文章目录1.Bootstrap概念2.快速入门3.响应式布局4.CSS样式和JS插件4.1.全局CSS样式4.2.组件4.3.插件5.案例1.Bootstrap概念概念：一个前端开发的框架ÿ 查看详情

bootstrap全局css样式

以下从官网抄来的，感觉还是很实用的，运用得好，灵活运用，非常方便快捷，能大大提高开发效率，也为调整不同尺寸的屏幕节省了时间。hidden-xs@media(max-width:767px){.hidden-xs{display:none!important;}}@media(max-width:991px)and(min-width:768px){.... 查看详情

bootstrap——全局css样式

1.栅格系统containter：用于固定宽度并支持响应式布局的容器container-fluid：用于100%宽度，占据全部视口（viewport）的容器row：行，必须在container或container-fluid之内col-md/xs-*：设置块的列宽col-md/xs-offset-*：列偏移col-md-push/pull：推/拉&n... 查看详情

bootstrap3之表格（table的各种样式）

1、table-striped：斑马线表格2、table-bordered：带边框的表格3、table-hover：鼠标悬停高亮的表格4、table-condensed：紧凑型表格(单元格的内距由8px调至5px。)5、table-responsive：响应式表格(当你的浏览器可视区域小于768px时，表格底部会出... 查看详情

[bootstrap入门][全局css样式-概论](代码片段)

[Bootstrap入门][全局CSS样式-概论]标签（空格分隔）：未分类移动设备优先为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。<metaname="viewport"content="width=device-width,initial-scale= 查看详情

修改bootstrap的全局样式，bootstrap3.0是由html5和css3组成的

...更好的字体样式设定，用*就会全部覆盖。　　正常引入bootstrap的css样式后，记得将自定义的样式表放到其之后，　　<linkrel="stylesheet"href="/Public/css/bootstrap.min.css">　　<linkrel="stylesheet"hr 查看详情

[bootstrap入门][全局css样式-栅格系统](代码片段)

[Bootstrap入门][全局CSS样式-栅格系统]标签（空格分隔）：未分类Bootstrap提供了一套响应式，移动设备优先的流式栅栏系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分配为最多12列。它包含了易于使... 查看详情

如何在Vue中防止UI框架中的全局css样式

】如何在Vue中防止UI框架中的全局css样式【英文标题】：HowtopreventglobalcssstylefromUIframeworkinVue【发布时间】：2021-06-1101:56:26【问题描述】：我正在使用一个名为ElementUI的UI框架，并且我正在将他们的表格用于我的项目。我需要表格... 查看详情

javascript课程——day24（bootstrap简介全局的css样式组件）

1、bootstrap简介　　1.1、什么是bootstrap？来自于Twitter，是目前很受欢迎的前端框架之一2011年8月在GitHub上发布的开源产品是一个用于快速开发web应用程序和网站的前端框架支持响应式布局。(响应式布局指的是一个网站能够兼容多... 查看详情

bootstrap框架(代码片段)

...　　　然后引入一下就能用了，很简单　　　　  Bootstrap全局样式　　 　　排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。　　我们只要在基本的HTML元素上通过设置class就能够应... 查看详情

bootstrap之编译css和javascript-0基础安装grunt教程

昨天晚上看到bootstrap全局CSS样式中使用Less章节中提到的通过grunt重新编译CSS和Javascript文件，对于我这样从未接触过windowscmdnode控制台npm的人，学习起来就有很大的难度了。那么我们照着教程一步一步来：第一步：安装node.js网址... 查看详情

前端之bootstrap框架(代码片段)

一Bootstrap简介在搭建前端页面时我们可以借用一些好的模板，为了让这些模板更好的让开发者使用，我们借助Bootstrap来实现一些常用的模板例如在看到上面这么好的模板，同学们是不是就想立刻收藏了呢？二css全局样式布局容器... 查看详情

第2章排版样式

本节课我们主要学习一下Bootstrap全局CSS样式中的排版样式，包括了标题、页面主体、对齐、列表等常规内容。一．页面排版Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。1.页面主体Bootstrap将全局font-size设置为14px... 查看详情