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. UIPickerView选择器的使用方法

    UIPickerView是选择列表内容的控件 使用方法与UITableView类似 都需要用array传入数据 用Delegate DataSource中的代理方法实现各种显示功能 @interfac ...

  2. MongoDB 基础 -安全性-(权限操作)

    和其他所有数据库一样,权限的管理都差不多一样.mongodb存储所有的用户信息在admin 数据库的集合system.users中,保存用户名.密码和数据库信息.mongodb默认不启用授权认证,只要 ...

  3. OWASP top10

    PhishTank 是互联网上免费提供恶意网址黑名单的组织之一,它的黑名单由世界各地的志愿者提供,且更新频繁. 1.XSS 1.1. XSS简介 跨站脚本攻击,英文全称是Cross Site Scri ...

  4. [poj2155]Matrix(二维树状数组)

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 25004   Accepted: 9261 Descripti ...

  5. (转)ubuntu安装opengl

    $ sudo apt-get install build-essential 安装OpenGL Library接下来要把我们会用到的 Library 装上去,首先安装 OpenGL Library $ ...

  6. 6严格的HTML:遵循标准,合乎规范

    标准的网页加载速度更快,并且在其他一些冲浪设备(如电话和电视)上运行地更好.如果没有告诉浏览器使用的HTML版本,许多浏览器将使用"转换显示"模式,而这可能会导致在不同浏览器有不一 ...

  7. C++字符串和string类介绍

    一.C风格字符串 ◆ 1.字符串是用字符型数组存储的,字符串要求其尾部以'\0'作为结束标志.如:    char string[ ]="C++ programming language&q ...

  8. [转]caffe+Ubuntu14.0.4 64bit 环境配置说明(无CUDA,caffe在CPU下运行) --for --Amd

    caffe是一个简洁高效的深度学习框架,具体介绍可以看这里,caffe环境配置过程可以参考这里,我在搭建环境时搜集了许多资料,这里整理了一下,介绍一下caffe在无CUDA的环境下如何配置. 1. 安 ...

  9. linux下生成 SSH 公钥,用于GitHub

    ssh-keygen -t rsa -C <email> 参见 https://help.github.com/articles/generating-ssh-keys/ Then add ...

  10. 百度的domain命令到底有用吗?

    曾几何时,站长和seoer们在百度输入domain:xxxxxxxx的时候弹出的结果数量让多少人兴奋和失落,为什么我们对百度的domain命令如此着迷呢?因为我们都认为百度的domain命令是查询网站 ...