第五周周记

25
五月
2021

初识BOOTSTRAP

  • 一、简介
    • 1、Bootstrap 包的内容
  • 二、Bootstrap 样式
    • 1、表格
    • 2、按钮
    • 3、图片
  • 二、BootStrap组件和插件
    • 1、导航栏
    • 2、页面标题
    • 3、列表组
    • 4、多媒体对象


一、简介

1、Bootstrap 包的内容

  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

  • CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

  • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

  • JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

  • 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

二、Bootstrap 样式

1、表格

<table>为表格添加基础样式。
<thead>表格标题行的容器元素(<tr>),用来标识表格列。
<tbody>表格主体中的表格行的容器元素(<tr>)。
<tr>一组出现在单行上的表格单元格的容器元素(<td><th>)。
<td>默认的表格单元格。
<th>特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption>关于表格存储内容的描述或总结。

2、按钮

一共有十四种按钮类型,

.btn为按钮添加基本样式
.btn-default默认/标准按钮
.btn-primary原始按钮样式(未被操作)
.btn-success表示成功的动作
.btn-info该样式可用于要弹出信息的按钮
.btn-warning表示需要谨慎操作的按钮
.btn-danger表示一个危险动作的按钮操作
.btn-link让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg制作一个大按钮
.btn-sm制作一个小按钮
.btn-xs制作一个超小按钮
.btn-block块级按钮(拉伸至父元素100%的宽度)
.active按钮被点击
.disabled禁用按钮

3、图片

.img-rounded为图片添加圆角 (IE8 不支持)
.img-circle将图片变为圆形 (IE8 不支持)
.img-thumbnail缩略图功能
.img-responsive图片响应式 (将很好地扩展到父元素)

二、BootStrap组件和插件

1、导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

创建一个默认的导航栏的步骤如下:
<nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=“navigation”,有助于增加可访问性。
<div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

2、页面标题

页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。

3、列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。

4、多媒体对象

多媒体对象的样式可用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。


TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员