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来学习less

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

  5. bootstrap插件学习

    转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...

  6. Bootstrap 基础学习笔记(一)

    排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

  7. Bootstrap的学习以及简单运用

    <!DOCTYPE html> <html> <head> <title>柠檬学院</title> <meta charset=&qu ...

  8. bootstrap插件学习-bootstrap.typehead.js

    先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...

  9. bootstrap插件学习-bootstrap.carousel.js

    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...

  10. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

随机推荐

  1. Bubble Cup 8 finals F. Bulbo (575F)

    题意: 给定初始位置,查询n次区间,每次查询前可以花费移动距离的代价来移动, 查询时需要花费当前位置到区间内最近的点的距离,求最小代价. 1<=n<=5000,1<=所有位置< ...

  2. Windows IIS 安装配置PHP环境

    一. 概述 二.安装PHP 1.到php官网下载最新版PHP http://windows.php.net/download 三.配置IIS PHP环境

  3. 【读书笔记】Ninject 在MVC5中的使用

    从MVC3中就开始接触Ninject这个IOC工具.也一直是MVC Framework系列书籍中推荐的IOC工具,当然还有优秀的Autofac等.性能和使用上面个有千秋.下面先看一下Ninject的使 ...

  4. IT人学习方法论(三):高效学习

    一些有关“怎么学”的建议 首先需要明确方向,否则即使学习方法再高效,也不免南辕北辙,背离自己的目标.关于学习方向的讨论,请参见之前的一篇文章 .下面我来重点说一说有关“怎么学”的建议. IT技术,不是 ...

  5. maximo功能修改笔记

    经过前几次的简单的修改系统功能,对maximo的bean开发已经有了一定了解,现在是耗时近两个礼拜来修改了一项系统功能,所用到的知识 Bean Fld, 下面我认真总结修改功能过程中的学到的知识: 目 ...

  6. FTP+SFTP工具类封装-springmore让开发更简单

    github地址:https://github.com/tangyanbo/springmore FTPUtil 该工具基于org.apache.commons.net.ftp.FTPClient进行 ...

  7. Extjs中给同一个GridPanel中的事件添加参数的方法

    Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({            text:'启用',            scope ...

  8. Hbase之取出行数据指定部分+版本控制(类似MySQL的Limit)

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.CellScanner; import org. ...

  9. LAMP最新源码一键安装脚本

    Linux+Apache+MySQL+PHP (脚本可以选择是否安装+Pureftpd+User manager for PureFTPd+phpMyAdmin+memcache),添加虚拟主机请执行 ...

  10. Golang学习 - sync 包

    ------------------------------------------------------------ 临时对象池 Pool 用于存储临时对象,它将使用完毕的对象存入对象池中,在需要 ...