Python100天学习笔记Day30 Bootstrap和Bulma框架
Posted Vax_Loves_1314
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python100天学习笔记Day30 Bootstrap和Bulma框架相关的知识，希望对你有一定的参考价值。
基于弹性盒子的CSS框架 - Bulma
Bulma是一个基于Flexbox的现代化的CSS框架，其初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复杂的内容布局，即使不懂CSS的开发者也能够使用它定制出漂亮的页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bulma</title>
<link href="https://cdn.bootcss.com/bulma/0.7.4/css/bulma.min.css" rel="stylesheet">
<style type="text/css">
div margin-top: 10px;
.column color: #fff; background-color: #063; margin: 10px 10px; text-align: center;
</style>
</head>
<body>
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
<div>
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
</div>
<div>
<progress class="progress is-danger is-medium" max="100">60%</progress>
</div>
<div>
<table class="table is-hoverable">
<tr>
<th>One</th>
<th>Two</th>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</body>
</html>
响应式布局框架 - Bootstrap
用于快速开发Web应用程序的前端框架，支持响应式布局。
-
特点
- 支持主流的浏览器和移动设备
- 容易上手
- 响应式设计
-
内容
- 网格系统
- 封装的CSS
- 现成的组件
- javascript插件
-
可视化
以上是关于Python100天学习笔记Day30 Bootstrap和Bulma框架的主要内容，如果未能解决你的问题，请参考以下文章
Python全栈100天学习笔记Day33Linux实用程序
Python100天学习笔记Day25 JS面向对象及DOM