Bootstrap学习笔记之css组件(3)

Bootstrap是一种流行的前端框架,具有易于使用、易于个性化定制以及具有响应式布局等特点。其中,尤其值得注意的是Bootstrap的一系列CSS组件,它们以通用的方式实现了诸如搜索框、导航条、模态框等常见的UI组件,提高了开发效率和页面质量。

本文将继续讲解Bootstrap的CSS组件,分类介绍其中的风格、用法和注意点。其中,将排版、图标、按钮和表格四部分分别进行介绍。

1. 排版

Bootstrap的排版组件通常是由一些基本的HTML标签和CSS样式组成,通过调整字体、字重、颜色等元素实现自定义的排版效果。

1.1 字体

Bootstrap提供了一套主题字体库,如果不想使用默认的”Helvetica Neue”、“Arial”等字体,可以直接使用这些字体库中的字体。

<!-- 使用主题字体库中的字体 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet">

1.2 颜色

Bootstrap提供了一套颜色主题库,与上述字体库类似,可以通过调用<style>标签来引入不同的颜色主题。

<!-- 调用不同的颜色主题 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet">

1.3 前缀

通过使用Bootstrap的前缀类(Prefix Class),可以对已有的HTML标签进行修饰,达到更好的排版效果。

<!-- 使用前缀类修饰HTML标签 -->
<p class="text-primary">文本内容</p>

2. 图标

Bootstrap提供了一些应用广泛的图标字体库,其中包括FontAwesome、Glyphicon、IconFont等。通过调用不同的字体库,可以实现不同的图标。

<!-- 调用FontAwesome字体库 -->
<link href="//cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<!-- 使用FontAwesome的图标 -->
<i class="fa fa-user"></i>

3. 按钮

Bootstrap中的按钮组件非常常见,这里将对按钮的分类、大小、状态等多个方面进行介绍。

3.1 分类

在Bootstrap中,按钮可以分为多种类型,包括默认按钮、链接按钮、块级按钮等。

<!-- 不同类型的按钮 -->
<button class="btn btn-default">默认按钮</button>
<a class="btn btn-primary" href="#">链接按钮</a>
<button class="btn btn-default btn-block">块级按钮</button>

3.2 大小

另外,Bootstrap也提供多种按钮大小,通过不同的类名实现。默认按钮大小(btn-default)的高度为34px,小按钮(btn-xs)高度为24px,大按钮(btn-lg)高度为44px

<!-- 不同大小的按钮 -->
<button class="btn btn-default btn-lg">大按钮</button>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default btn-xs">小按钮</button>

3.3 状态

Bootstrap的按钮还提供了多种状态,包括禁用(disabled)、激活(active)等。

<!-- 激活和禁用状态 -->
<button class="btn btn-success active">激活状态</button>
<button class="btn btn-danger" disabled>禁用状态</button>

4. 表格

最后,Bootstrap的表格组件也非常常用,这里将对表格的基本结构、样式、响应式等几个方面进行介绍。

4.1 基本结构

Bootstrap的表格的基本HTML结构如下,其中theadtbody分别表示表头和表格主体。

<!-- 基本表格结构 -->
<table class="table">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th> 
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>21</td>
    </tr>
    <tr>
      <td>003</td>
      <td>王五</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

4.2 样式

对于表格样式,Bootstrap提供了多种属性,用来控制边框、字体、背景等属性。

<!-- 表格样式属性 -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th> 
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>21</td>
    </tr>
    <tr>
      <td>003</td>
      <td>王五</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

4.3 响应式

对于移动端的响应式布局,Bootstrap在表格组件上也提供了相应的解决方案,可以通过添加table-responsive类名的方式来实现响应式表格。

<!-- 响应式表格 -->
<div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th> 
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>张三</td>
        <td>20</td>
      </tr>
      <tr>
        <td>002</td>
        <td>李四</td>
        <td>21</td>
      </tr>
      <tr>
        <td>003</td>
        <td>王五</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
</div>

以上就是本文介绍的Bootstrap的CSS组件部分,包括排版、图标、按钮和表格四个方面。希望对Bootstrap的学习和使用有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Bootstrap学习笔记之css组件(3) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS学习之一 CSS样式的引入

    关于CSS样式的引入有以下几种方法: 内部样式表 内部样式表是指将CSS样式直接写在HTML文档中,使用style标签将CSS样式放在head标签中。 示例代码: <!DOCTYPE html> <html> <head> <title>示例文档</title> <style> body…

    css 2023年6月9日
    00
  • CSS解决链接锚点定位偏移的代码

    当使用锚点进行页面内跳转时,有时候会出现链接跳转后定位偏移的情况,而这个偏移量通常是因为网页布局中的fixed或absolute元素引起的。为了解决这种情况,我们可以使用CSS来删掉这些元素的影响,具体的攻略如下: 攻略 在锚点的目标位置上方添加一个与fixed元素高度相等的空白元素,在空白元素上设置相反的margin-top,即负值等于fixed元素的高度…

    css 2023年6月9日
    00
  • firefox和IE系列的相关区别整理 以备后用

    Firefox和IE系列的相关区别整理 1.浏览器内核 Firefox采用Gecko内核,这是Mozilla基金会开发的一个网页排版引擎,它实现了最新的Web标准,同时支持HTML5和CSS3等新技术。 IE系列的内核则不断更新,IE6采用的是Trident内核,IE7和IE8采用Trident 2.0(也称为MSHTML),IE9~IE11采用Triden…

    css 2023年6月9日
    00
  • 微信小程序如何调用新闻接口实现列表循环

    下面我将为您详细讲解如何使用微信小程序调用新闻接口实现列表循环。 第一步:准备工作 在网上找到一些开放的新闻接口,例如聚合数据提供的头条新闻接口; 在微信公众平台注册并获取小程序的AppID和AppSecret,并在小程序后台配置好接口安全域名。 第二步:调用接口 在微信小程序中,我们可以使用wx.request()方法调用接口。具体方法如下: wx.req…

    css 2023年6月10日
    00
  • 何为XHTML??

    XHTML是一种标记语言,是HTML的升级版本。它使用XML的语法,更加严格和结构化,可以为网站提供更好的标记和可访问性,也便于计算机处理和解析,同时也支持更多的扩展和样式控制。 XHTML文档的语法要求严格,必须包含DTD(DocType Declaration),并将HTML标签转换为小写字母。同时还需要避免一些HTML中不规范的语法,如缺失标签闭合、属…

    css 2023年6月9日
    00
  • CSS设计制作长度高度不一样的网页区块

    在 Web 设计中,经常需要制作长度和高度不一样的网页区块。这可以通过 CSS 中的一些属性来实现。下面是一个完整攻略,包含了如何使用 CSS 设计制作长度和高度不一样的网页区块的过程和两个示例说明。 CSS 设计制作长度高度不一样的网页区块 步骤一:使用 display:flex 属性 首先,我们可以使用 display:flex 属性来创建一个灵活的布局…

    css 2023年5月18日
    00
  • Vue3基于 rem 比例缩放方案示例详解

    Vue3基于rem比例缩放方案示例详解 引言 在Web开发中,页面的响应式设计(不同屏幕尺寸适配)是一个很重要的问题。其中一个方案是使用 rem 比例缩放方案。本文将介绍如何在Vue3中使用 rem 缩放方案实现响应式页面,并通过两个示例详细讲解具体实现。 什么是rem? rem是css中的一个长度单位,相对于根元素字体的大小(font-size)进行计算。…

    css 2023年6月11日
    00
  • 清理CSS样式的几个有用工具

    清理CSS样式是Web开发过程中非常重要的一步,可以有效地减少代码冗余,提高网页加载速度和性能。以下将介绍几个常用的CSS样式清理工具,帮助我们快速、简单地清理CSS样式。 1. CSS Purge CSS Purge是一款小巧、简单的CSS样式清理工具,用来删除未使用的CSS。实现原理是通过解析HTML文件,在运行时分析CSS文件中的选择器和样式规则,然后…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部