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. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  2. 使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  3. MYSQL的大数据量情况下的分页查询优化

    最近做的项目需要实现一个分页查询功能,自己先看了别人写的方法: <!-- 查询 --> <select id="queryMonitorFolder" param ...

  4. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  5. 敏捷遇上UML-需求分析及软件设计最佳实践(郑州站 2014-6-7)

      邀请函: 尊敬的阁下:我们将在郑州为您奉献高端知识大餐,当敏捷遇上UML,会发生怎样的化学作用呢?首席专家张老师将会为您分享需求分析及软件设计方面的最佳实践,帮助您掌握敏捷.UML及两者相结合的实 ...

  6. Python基础篇【第7篇】: 面向对象(1)

    面向对象技术简介 相近对象,归为类 在人类认知中,会根据属性相近把东西归类,并且给类别命名.比如说,鸟类的共同属性是有羽毛,通过产卵生育后代.任何一只特别的鸟都在鸟类的原型基础上的.面向对象就是模拟了 ...

  7. iOS开发中对RunLoop的个人心得

    从接触iOS到现在也有将近两年了,对iOS中的RunLoop也有了一定的认识,下面讲讲个人对RunLoop的理解.   初识RunLoop RunLoops是与线程相关联的基础部分,一个Run Loo ...

  8. VS代码管理插件AnkhSvn

    下载AnKHSvn软件,启动VS,源代码管理工具选择AnKHSvn 在视图-〉其它窗口-〉Pending Change->提交变化的更改

  9. 161012、JAVA读写文件,如何避免中文乱码

    1.JAVA读取文件,避免中文乱码. /** * 读取文件内容 * * @param filePathAndName * String 如 c:\\1.txt 绝对路径 * @return boole ...

  10. URAL 1183 Brackets Sequence(DP)

    题目链接 题意 : 给你一串由括号组成的串,让你添加最少的括号使该串匹配. 思路 : 黑书上的DP.dp[i][j] = min{dp[i+1][j-1] (sh[i] == sh[j]),dp[i] ...