BootStrap简单组件使用

最新推荐文章于 2023-11-07 14:31:20 发布

灰白色可乐

最新推荐文章于 2023-11-07 14:31:20 发布

阅读量2.9k

点赞数 1

分类专栏：前端学习文章标签： bootstrap

本文链接：https://blog.csdn.net/fengyao1995/article/details/52200488

版权

前言

新项目改框架，前台要用BootStrap响应式布局，如此一来，又把BootStrap学习了一遍。BootStrap响应式布局做的不错，组件的使用也是跟以前有了很大的不同，下面就简单介绍一下BootStrap简单组件的使用。

使用BootStrap

使用BootStrap前，需要先引入BootStrap的css、js和Jquery。

面板

通常做系统时，我们经常会把页面分为几部分。一般情况下我们会将页面分为几个div，然后设置div的样式，有了BootStrap，就可以直接用面板来控制，而且它还可以根据浏览器窗口的大小来自适应自己的大小，这也是响应式布局的一个特点。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带表格的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>
</body>
</html>

栅格布局

现在公司做的项目，基本上都是左侧展示功能列表，右侧展示详细的页面内容。自动的将页面分为左右两部分，就是用BootStrap的栅格布局来做的，其实也不止是两部分，多个栅格也是可以的。BootStrap栅格布局会自动把页面分为12列，只要分别设置左右的列数就可以控制左右两边的宽度。栅格布局是没有高度的，它会根据里面放置内容的高度来自适应，不过也可以重写BootStrap的css，使得栅格在一加载的时候就有自己的高度。

<div class="container">
	<div class="row clearfix">
		<div class="col-md-6 column">
		</div>
		<div class="col-md-6 column">
		</div>
	</div>
</div>

表格

表格应该算是很常用的了，BootStrap的表格元素没有变，在页面上写一个表格，只不过要修改表格的class，这样就能添加BootStrap的样式。

表格元素：

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

最低0.47元/天解锁文章

灰白色可乐

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
16
评论
BootStrap简单组件使用

前言新项目改框架，前台要用BootStrap响应式布局，如此一来，又把BootStrap学习了一遍。BootStrap响应式布局做的不错，组件的使用也是跟以前有了很大的不同，下面就简单介绍一下BootStrap简单组件的使用。使用BootStrap 使用BootStrap前，需要先引入BootStrap的css、js和Jquery。面板
复制链接

扫一扫

专栏目录