Bootstrap-frame

来源：互联网发布：软件开放平台编辑：程序博客网时间：2024/06/08 14:44

Bootstrap基础知识=============1.1基本概念bootstrap是什么？bootstrap是一个HTML、CSS和JavsScript的一个前端框架，应用非常广泛。用于响应式、移动设备优先的web项目。1.2 安装这里也就不做多解释了。1.3 基本模板由于bootstrap是基于jQuery，所以在引用bootstrap.js之前一定要先引用jQuery.js2 Bootstrap CSS2.1概述前段开发人员习惯使用全局CSS文件，bootstrap也是如此。

body {  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 14px;  line-height: 1.42857143;  color: #333;  background-color: #fff;}

a {  color: #337ab7;  text-decoration: none;}a:hover,a:focus {  color: #23527c;  text-decoration: underline;}a:focus {  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}

2.2栅格系统bootstrap的响应式解决方案重点就是栅格系统。所谓的栅格系统就是将整个屏幕划分成若干个（一般是12）等宽的列，bootstrap中定义了一系列的预定义类用于实现栅格系统。案例：

    <style>        div{            background-color: skyblue;            border: 1px solid blueviolet;        }    </style></head><body><div class="container">    <div class="row">        <div class="col-sm-2">            .col-ma-2        </div>        <div class="col-sm-2">            .col-ma-2        </div>        <div class="col-sm-2">            .col-ma-2        </div>        <div class="col-md-2">            .col-ma-2        </div>        <div class="col-md-2">            .col-ma-2        </div>        <div class="col-md-2">            .col-ma-2        </div>    </div>    <div class="row">        <div class="col-sm-6">            .col-sm-6        </div>        <div class="col-sm-6">            .col-sm-6        </div>    </div></div></body>

显示结果会随着浏览器尺寸（实际是根据设备的不同）自动调整布局。当屏幕尺寸小于768是纵向排列
这里写图片描述
而当屏幕尺寸超过768时显示为横向布局。

查看一下相关类的定义
（1）container：

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}@media (min-width: 768px) {  .container {    width: 750px;  }}@media (min-width: 992px) {  .container {    width: 970px;  }}@media (min-width: 1200px) {  .container {    width: 1170px;  }

在bootstrap中定义了容器的内外边距，同时根据屏幕尺寸的不同设置不同的宽度。

.row {  margin-right: -15px;  margin-left: -15px;}

通过设置负值的外边距，抵消了容器的内边距。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}

@media (min-width: 768px) {  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {    float: left;  }  .col-sm-12 {    width: 100%;  }  .col-sm-11 {    width: 91.66666667%;  }  .col-sm-10 {    width: 83.33333333%;  }  .col-sm-9 {    width: 75%;  }  .col-sm-8 {    width: 66.66666667%;  }  .col-sm-7 {    width: 58.33333333%;  }  .col-sm-6 {    width: 50%;  }  .col-sm-5 {    width: 41.66666667%;  }  .col-sm-4 {    width: 33.33333333%;  }  .col-sm-3 {    width: 25%;  }  .col-sm-2 {    width: 16.66666667%;  }  .col-sm-1 {    width: 8.33333333%;  }

列预定义类的命名规则：
（1）col表示列的含义
（2）sm是表示屏幕尺寸类型的一种
这里写图片描述
（3）最后的数字表示占整个屏幕容器宽度的十二分之一的倍数

总结一下响应式布局的原理：
（1）容器的宽度是和屏幕尺寸相关，通过媒体查询来实现
（2）当屏幕尺寸达到大小要求时，可以使用特定的列的预定义类（如col-md-2）。
（3）列定义成靠左浮动，且宽度是利用百分比来设置的。

<div class="container">     <div class="row">         <div class="col-xs-6 col-sm-8">col1</div>         <div class="col-xs-6 col-sm-4">col2</div>     </div></div>

给列添加了多个类，可以控制在不同的尺寸下比例的自适应。
当尺寸小于768时，两列的宽度是1:1，实际上是col-xs-6在起作用；
这里写图片描述
而当尺寸大小大于768时，列宽比为2:1，也就是col-sm-4在起作用。

案例：

<div class="container">     <div class="row">         <div class="col-sm-5">col1</div>         <div class="col-sm-5">col2</div>         <div class="col-sm-5">col3</div>     </div></div>

当一行的各列超过总宽度时，bootstrap会将超过的部分放在下一行。
这里写图片描述
案例：

<div class="container-fluid">     <div class="row">         <div class="col-xs-6">col1</div>         <div class="col-xs-6">col2</div>     </div></div>

container-fluid和container类的区别是container是定义了固定的宽度，而container-fluid没有定义宽度，所以会随着父容器的变化而变化。案例：偏移

<div class="container">     <div class="row">         <div class="col-xs-6">col1</div>         <div class="col-xs-3 col-xs-offset-3">col2</div>     </div></div>

col-xs-offset-3是表示偏移3个单位
这里写图片描述

案例：嵌套

<div class="container">     <div class="row">         <div class="col-xs-6">             col1             <div class="row">                 <div class="col-xs-8">col1-1</div>                 <div class="col-xs-4">col1-2</div>             </div>             <div class="row">                 <div class="col-xs-8">col2-1</div>                 <div class="col-xs-4">col2-2</div>             </div>         </div>         <div class="col-xs-6">col2</div>     </div></div>

所谓的嵌套，是在某个栅格中再安排一个或多个row
这里写图片描述

案例：后推、前拉单元

<div class="container">     <div class="row">         <div class="col-xs-6 col-xs-push-6">col1</div>         <div class="col-xs-3 col-xs-pull-6">col2</div>     </div></div>

这里写图片描述
col-xs-push-6表示后推6个单元；
col-xs-pull-6表示前拉6个单元。

案例：表单

<form>    <div class="form-group">        <label for="exampleInputEmail1">Email address</label>        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">    </div>    <div class="form-group">        <label for="exampleInputPassword1">Password</label>        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">    </div>    <div class="form-group">        <label for="exampleInputFile">File input</label>        <input type="file" id="exampleInputFile">        <p class="help-block">Example block-level help text here.</p>    </div>    <div class="checkbox">        <label>            <input type="checkbox"> Check me out        </label>    </div>    <button type="submit" class="btn btn-default">Submit</button></form>

在客户端的输入框，都是占整个屏幕宽的100%，所以在pc端上就占满了整个屏宽。
这里写图片描述
选中图片后：
选中文件后：

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

案例：内联表单

<form class="form-inline">    <div class="form-group">        <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>        <div class="input-group">            <div class="input-group-addon">$</div>            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">            <div class="input-group-addon">.00</div>        </div>    </div>    <button type="submit" class="btn btn-primary">Transfer cash</button></form>

这里写图片描述

3 Bootstrap组件
播放：class=”glyphicon glyphicon-play”

<button class="btn btn-default">    <span class="glyphicon glyphicon-play"></span></button>

播放、暂停、停止：btn-group-lg/btn-group-sm,可以设置大小

<div class="btn-group btn-group-lg">    <button class="btn btn-default">        <span class="glyphicon glyphicon-play"></span>    </button>    <button class="btn btn-default">        <span class="glyphicon glyphicon-pause"></span>    </button>    <button class="btn btn-default">        <span class="glyphicon glyphicon-stop"></span>    </button></div>

这里写图片描述
下拉：span标签里为插入的下拉符号
上拉列表只需修改最外面的div的class的dropdown改为dropup

<div class="dropdown">    <button class="btn btn-default" data-toggle="dropdown">        编程语言        <span class="caret"></span>    </button>    <ul class="dropdown-menu">        <li class="dropdown-header">一般语言</li>        <li><a href="">C++</a></li>        <li class="disable"><a href="">Java</a></li>        <li class="divider"></li>        <li class="dropdown-header">脚本语言</li>        <li><a href="">JavaScript</li>        <li><a href="">CSS3</a></li>    </ul></div>

这里写图片描述
输入框组：基本实例

  <div class="input-group">    <span class="input-group-addon">$</span>    <input type="text" class="form-control"/>    <span class="input-group-addon">.00</span></div><div class="input-group">    <input type="text" class="form-control"/>    <span class="input-group-btn">        <button class="btn btn-default">            <span class="glyphicon glyphicon-search"></span>        </button>    </span></div>

这里写图片描述

4 Bootstrap插件
调用对话框的两种方式：
（1）属性控制
（2）js控制。设计一个点击事件
还可以设置data-backdrop=”false”，这个属性是让点击“同意”按钮无效

<body><!--调用对话框:属性控制--><button class="btn btn-warning" data-toggle="modal" data-target="#dialog1">用我的食欲赞同</button><!--调用对话框：js控制--><button class="btn btn-warning" id="btn_delete">全票通过</button><!--创建对话框--><div class="modal" id="dialog1">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title">                    大神老鼠的下场                </h4>            </div>            <div class="modal-body">                （1）吃了（蒸、炸、煎、煮、烤）<br>                （2）放生 == 自生自灭            </div>            <div class="modal-footer">                <button class="btn btn-default">同意</button>            </div>        </div>    </div></div><script>    $("#btn_delete").click(function(){        $("#dialog1").modal("show");    });</script>

结果如下：
这里写图片描述

阅读全文

0 0