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]>

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

二网格系统

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

Bootstrap的学习
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT

例：

<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的效果更显著

Bootstrap的学习
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT

例：如何同时控制4个

*{ 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>

</body>

max-width max：最大宽

响应式实用工具

例：放置位置

</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-768px){.container{width:100%}}
@media (min-992px){.container{width:100%}}
@media (min-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的学习
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT

Bootstrap的学习 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT

Bootstrap 是基于 HTML、CSS、JAVASCRIPT

相关推荐