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应用程序的前端框架,支持响应式布局。

  1. 特点

    • 支持主流的浏览器和移动设备
    • 容易上手
    • 响应式设计
  2. 内容

    • 网格系统
    • 封装的CSS
    • 现成的组件
    • javascript插件
  3. 可视化

以上是关于Python100天学习笔记Day30 Bootstrap和Bulma框架的主要内容,如果未能解决你的问题,请参考以下文章

Python全栈100天学习笔记Day33Linux实用程序

Python100天学习笔记Day23 CSS渲染页面

Python100天学习笔记Day24 JS基本语法

Python100天学习笔记Day25 JS面向对象及DOM

Python100天学习笔记Day22 Web学习-Html标签

Python100天学习笔记Day22 Web学习-Html标签