Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

运用了一个link标签，href属性                                                        引入一个外部样式表文件

<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

以上3个文件就可以使用Bootstrap，JQ一定是在最上边的

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->  这不是注释语法，而是if语句

二 网格系统

默认的把一行拆成12个格   网格系统宽度  同一级别的谁在下面用谁的，上边的会被覆盖掉

例：

<body>

<div class="container">      container  代表容器
 <div class="row"> 
 <div class="col-xs-6"></div>     * 是能替换掉的
 <div class="col-xs-6"></div>     
 </div>
</div>
</body>

注：在bootstrap里的class名不能更改，因为预设了很多样式，直接复制

如果做响应式的效果，选择XS的效果更显著

例：如何同时控制4个

<style type="text/css">

*{ margin:0px auto; padding:0px}

.d1{ background-color:#F30;  color:white; text-align:center; line-height:30px; height:30px; vertical-align:middle}

</style>

<body>

<div class="container">

<div class="row">

<div class="col-xs-2 d1">首页</div>

<div class="col-xs-4 d1">产品介绍</div>

<div class="col-xs-4 d1">售后服务</div>

<div class="col-xs-2 d1">联系我们</div>

</div>

</div>

</body>

max-width     max：最大宽

响应式实用工具

 例：放置位置

<div class="container">

<div class="row">

<div class="col-xs-2 d1 ">首页</div>

<div class="col-xs-4 d1 hidden-xs">产品介绍</div>

<div class="col-xs-4 d1 hidden-xs">售后服务</div>

<div class="col-xs-2 d1 hidden-xs">联系我们</div>

</div>

</div>

 练习图

<title>无标题文档</title>

<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<script src="dist/js/jquery-1.11.2.min.js"/></script>

<script src="dist/js/bootstrap.min.js"/></script>

<style type="text/css">

*{ margin:0px auto; padding:0px}

@media (min-width:768px){.container{width:100%}}

@media (min-width:992px){.container{width:100%}}

@media (min-width:1200px){.container{width:100%}}

.d1{ background-color:#F60; color:#FFF; text-align:center; line-height:40px; height:40px; vertical-align:middle; font-weight:bold}

.t1{ max-width:400px;}

</style>

</head>

<body>

<div class="container">

   <div class="row">

      <div class="col-xs-2 d1">首页</div>

      <div class="col-xs-4 d1">产品展示</div>

      <div class="col-xs-4 d1">售后服务</div>

      <div class="col-xs-2 d1">联系我们</div>

   </div>

</div>

<table class="table table-striped">

  <caption>条纹表格布局</caption>

  <thead>

    <tr>

      <th>名称</th>

      <th>城市</th>

      <th>邮编</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Tanmay</td>

      <td>Bangalore</td>

      <td>560001</td>

    </tr>

    <tr>

      <td>Sachin</td>

      <td>Mumbai</td>

      <td>400003</td>

    </tr>

    <tr>

      <td>Uma</td>

      <td>Pune</td>

      <td>411027</td>

    </tr>

  </tbody>

</table>

<input type="text" class="form-control t1" placeholder="请输入用户名">

</body>

Bootstrap的学习的更多相关文章

  1. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  2. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  3. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  4. Bootstrap基础学习 ---- 系列文章

    [Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

  5. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. bootstrap基础学习【菜单、按钮、导航】（四）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. bootstrap基础学习【网格系统】（三）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. bootstrap基础学习【排版】（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. 通过bootstrap来学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好 ...

随机推荐

  1. Centos 7下mysql的安装与配置

    1,先下载好MySQ安装包并解压(不做详细说明). 2,上传解压后的MySQL安装包到虚拟机上. 3,安装MySQL [root@localhost /]# yum install mysql5.7. ...

  2. noip2008-t3

    [题目描述] 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n 列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸 ...

  3. 【转】测试LibreOffice SDK 开发环境配置(Windows)

    原文:http://www.aqcoder.com/blog/detail/id/7441186b-93fd-482c-b4d7-0facd1ee498d 下载与安装 LibreOffice 主页:h ...

  4. Python socket (多线程)

    Server 端 code import SocketServer class MyTCPHandler(SocketServer.BaseRequestHandler): ""& ...

  5. CPU与内存的关系

    至今才对cpu和内存有一定了解了,下面有几个比喻的理解,很形象呦~ 1# 例如你要吃东西时,硬盘是锅,内存是碗,CPU是你,浅显点就是这样子了~ 2# 例如电脑是企业,内存是车间,cpu是生产线,硬盘 ...

  6. Java 对象内存占用

    java基本类型及对象占用的内存大小 请参考下面文章 原始类型及对象占用的内存大小 http://www.javamex.com/tutorials/memory/object_memory_usag ...

  7. SQL入门经典(九) 之自定义函数

    UDF和存储过程很类似,用户自定义函数是一组有序的T-SQL语句,这些语句被预先优化和编译,并且可以作为一个单元来测试调用.UDF和存储过程的主要区别在于结果返回方式,为了能支持更多返回值,UDF比存 ...

  8. 高性能网站架构设计之缓存篇（3）- Redis 的配置

    我们说Redis是一个强大的Key-Value存储系统,在前面我们已遇到了两个问题: 1.redis server 启动后,独占进程,能不能修改为后台服务呢? 2.redis server 服务是单线 ...

  9. [.NET领域驱动设计实战系列]专题九：DDD案例：网上书店AOP和站点地图的实现

    一.引言 在前面一专题介绍到,要让缓存生效还需要实现对AOP(面向切面编程)的支持.所以本专题将介绍了网上书店案例中AOP的实现.关于AOP的概念,大家可以参考文章:http://www.cnblog ...

  10. 升级AutoMapper后遇到的“Missing map”与“Missing type map configuration”问题

    前几天发现 AutoMapper 3.3 的一个性能问题(详见:遭遇AutoMapper性能问题:映射200条数据比100条慢了近千倍),于是将 AutoMapper 升级至最新的 5.1.1 看是否 ...