Bootstrap学习笔记-布局

  默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象。

      

<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src = "bootstrap/js/bootstrap.js"></script>
<meta name="viewport" content="width-device-width,initial-scale=1">

</head>
<body>
<div class="container">

<h1 class="page-header">固定的宽度</h1>

</div>

<div class="container-fluid">

<h1 class="page-header">固定的宽度百分比</h1>

</div>

</body>
</html>

Bootstrap学习笔记-布局的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. bootstrap学习笔记&lt;八&gt;(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  8. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  9. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

随机推荐

  1. Android——WebView

    WebView用途 通过Intent调用系统浏览器: 引言: Uri uri = Uri.parse(url);//url为你要链接的地址 Intent intent = new Intent(Int ...

  2. JdkDynamicAopProxy源码

     JdkDynamicAopProxy是通过接口实现动态代理类,主要方法是getProxy(ClassLoader classLoader), 代理类生成之后再调用目标方法时就会调用invoke方法. ...

  3. Amazon.com: NEW VI AND VIM EDITOR KEYBOARD STICKER: Office Products

    Amazon.com: NEW VI AND VIM EDITOR KEYBOARD STICKER: Office Products NEW VI AND VIM EDITOR KEYBOARD S ...

  4. linux添加lvm磁盘大小,命令行创建swap

    添加硬盘 添加一块硬盘. 重新扫描硬盘 echo "- - -" > /sys/class/scsi_host/host0/scan echo "- - -&quo ...

  5. Nginx详解十三:Nginx场景实践篇之防盗链

    防盗链: 目的:防止资源被盗用 防盗链设置思路 首要方式:区别哪些请求是非正常的用户请求 基于http_refer防盗链配置模块(判断refer(上一步的链接)信息是否为允许访问的网站) 配置语法:v ...

  6. 如何正确认识Docker Kubernetes 和 Apache Mesos

    参考链接: http://geek.csdn.net/news/detail/229382

  7. Python基础线程和协程

    线程: 优点:共享内存,IO操作时,创造并发操作 缺点:枪战资源 线程不是越多越好,具体案例具体分析,请求上下文切换耗时 IO密集型适用于线程,IO操作打开文件网络通讯类,不需要占用CPU,只是由CP ...

  8. R语言使用RMySQL连接及读写Mysql数据库 测试通过

    R语言使用RMySQL连接及读写Mysql数据库 简单说下安装过程,一般不会有问题,重点是RMySQL的使用方式. 系统环境说明 Redhat系统:Linux 460-42.6.32-431.29.2 ...

  9. NetCore入门篇:(八)Net Core项目使用Controller之三

    一.简介 1.本节主要说明入参的几种接收方式 二.不限定模式 1.定义一个id入参与一个model入参. 2.get\post分别查看访问效果. api代码 public class OneContr ...

  10. 扩展KMP - HDU 4333 Revolving Digits

    Revolving Digits Problem's Link Mean: 给你一个字符串,你可以将该字符串的任意长度后缀截取下来然后接到最前面,让你统计所有新串中有多少种字典序小于.等于.大于原串. ...