bootstrap (前端css框架)

简介: bootstrap是一个前端css框架,由twitter公司开发。它简洁、直观、漂亮,特点之一是能够根据不同尺寸的设备(如手机、平板、笔记本与台式机的显示器尺寸不一)来响应式地布局,背后原理是css的媒体查询功能。 响应式 实现响应式布局的<meta>标签: <!-- Bootstrap 根据屏幕大小自适应样式 --><meta name="vi

bootstrap是一个前端css框架,由twitter公司开发。它简洁、直观、漂亮,特点之一是能够根据不同尺寸的设备(如手机、平板、笔记本与台式机的显示器尺寸不一)来响应式地布局,背后原理是css的媒体查询功能。

响应式

实现响应式布局的<meta>标签:

<!-- Bootstrap  根据屏幕大小自适应样式 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
图片也可响应式处理:

	<img class="img-responsive" src="../pictures/meChild.jpg"  /> 

表格也可响应式处理:

通过把任意的 .table 包在 .table-responsive class ,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

栅格布局的响应式:

<div class="saying col-md-5 col-md-offset-7 col-xs-10 col-xs-offset-2">——心中有高考,年年可高考</div>
小屏设备上,col-xs-10 col-xs-offset-2起作用, col-md-5 col-md-offset-7不起作用。中等屏幕设备上则反之。


引用

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

栅格化

屏幕的宽度被等分为12份。注意.class必须放在.row内。

<!-- 若一个元素想占2个宽度,并且往右偏移10个宽度-->
<div class="row">
	<div class="col-md-2 col-md-offset-10"></div>
</div>




目录
相关文章
|
19天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
37 4
N..
|
29天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
35 0
|
8天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
17 1
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
11天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2
|
21天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
资源调度 前端开发 JavaScript
推荐一款可以自动创建视频的前端Ract框架
推荐一款可以自动创建视频的前端Ract框架
|
1月前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧,包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧,开发者可以更加灵活地控制页面的布局,提升用户体验和界面的美观性。