BBOTSTRAP
2024-09-06 13:34:47
Bootstrap
第一步:下载
第二步: 解压缩
第三步:引入(head内部 link引入)
Bootstrap 全局样式
移动设备优先:
<meta name="viewport" content="width=device-width, initial-scale=1">
(需要在<head> 之间添加元数据标签
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no
可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">)
<meta http-equiv="X-UA-Compatible" content="IE=edge">(告诉IE浏览器以最高规格渲染)
.c1 {
background-color: red;
padding: 10px 20px;
margin: 0 auto;
height: 100px;
width: 100px;
} margin:0 auto 为 自动居中
一.布局容器
<div class="container">
...
</div>
或
<div class="container-fluid">
...
</div>
二.栅格系统
<div class="col-xs-6 c1 col-xs-push-6">
</div>
<div class="col-xs-6 c2 col-xs-pull-6">
</div> 或
<div class="col-md-6 col-xs-6 c1 col-xs-offset-3">
</div> 一共12列
三.媒体查询
@media screen and (max-width: 700px) {
.c1 {
background-color: green; 放 style 里
@media screen and (max-width: 700px) {
.c1 {
background-color: green; 放 style 里
四 嵌套列
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
最新文章
- Apache 服务器搭建 总结
- Https网站搭建——通过https://localhost:8443访问tomcat首页
- SpringCloud Sleuth 使用
- ionic 常见问题
- Windows下查看端口冲突的进程
- [问题2014A06] 复旦高等代数 I(14级)每周一题(第八教学周)
- xll调试方法
- NSString
- Eclipse 4.2 + Tomcat 7.x + JDK 7 搭建Java Web开发环境
- cf D. Valera and Fools
- Scala学习文档-各种使用模式的情况
- navicat连接oracle 报 ORA-12737 set CHS16GBK
- js 操作数组(过滤对应数据)
- 第四周助教工作总结——NWNU李泓毅
- oracle kill 锁
- HDFS-异常大全-《每日五分钟搞定大数据》
- 【转】Mapped Statements collection does not contain value for解决
- 【Struts2】剖析Struts2中的反射技术 ValueStack(值栈)
- golang的urlrouter
- OC - GCD 队列组 - 下载图片画图