W3-BootStrap初步

最新推荐文章于 2024-09-12 17:46:18 发布

小红帽的狼外婆_x

最新推荐文章于 2024-09-12 17:46:18 发布

阅读量208

点赞数

文章标签：列表 css html bootstrap

本文链接：https://blog.csdn.net/reL_iuhgc34n_x/article/details/118188782

版权

本文介绍了BootStrap的基础知识，包括环境安装、样式设计，如表格、按钮和图片的使用，以及组件和插件的应用，如导航栏、页面标题、列表组和多媒体对象的创建方法。

摘要由CSDN通过智能技术生成

BootStrap初步

3.1BootStrap简介和环境安装
3.2BootStrap样式
3.3BootStrap组件和插件

3.1BootStrap简介和环境安装

下载 Bootstrap
一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

Staticfile CDN 推荐（国内推荐）

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

3.2BootStrap样式

3.2.1Bootstrap 表格

3.2.1.1表格元素

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

3.2.1.2表格类（使用实例）

<div class="container">
	<h2>表格</h2>
	<p>联合使用所有表格类:</p>                                          
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>

其他样式可参考。

3.2.2Bootstrap 按钮

下面实例的样式可用于<a>, <button>, 或 <input> 元素上：

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button

最低0.47元/天解锁文章

小红帽的狼外婆_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫