目 录CONTENT

文章目录

bootstrap

Administrator
2020-07-24 / 0 评论 / 4 点赞 / 7659 阅读 / 25101 字

Bootstrap

BootStrap准备工作

<meta name="renderer" content="webkit" >
<link rel="stylesheet" href="./css/bootstrapV3/css/bootstrap.min.css" type="text/css">
<!--[if lt ie 9]>
    <script src="./css/bootstrapV3/html5shiv.min.js" type="text/javascript"></script>
    <script src="./css/bootstrapV3/respond.min.js" type="text/javascript"></script> 
<![endif]-->
<script src="./css/bootstrapV3/js/jquery.min.js" type="text/javascript"></script>
<script src="./css/bootstrapV3/js/bootstrap.min.js" type="text/javascript"></script> 

说明:一定要先导jQuery,再导BooStrap

container容器

pc端:container容器 ,根据设备大小,自动调整内容宽度,并且居中,内容两边都留有间隙

移动端:container-fluid 宽度为100%

网格系统

额外的小设备收集(<768px)小型设备平板电脑(≥768px)中型设备台式电脑(≥992px)大型设备台式电脑(≥1200px)
网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
12121212

网格的基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

偏移列

使用 .col-md-offset-*,这些类会把一个列的左外边距(margin)增加 ***** 列,其中 ***** 范围是从 111

<div class="row" >
      <div class="col-xs-6 col-md-offset-3" >
         <p>Lorem ipsum dolor sit amet </p>
      </div>
   </div>

列排序

.col-md-push-*.col-md-pull-* 类的内置网格列的顺序,其中 ***** 范围是从 111

<div class="row">
      <p>排序前</p>
      <div class="col-md-4" >
         我在左边
      </div>
      <div class="col-md-8" >
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" >
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" >
         我在右边
      </div>
   </div>

标题

<h1>我是标题1 h1</h1>
<h6>我是标题6 h6</h6>
<div class="h1">
    这也是1号标题
</div>
<p class="h6">
    这也是6号标题
</p>

内联子标题

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 

引导标题

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。。</p>

页面标题

<div class="page-header">
    <h2 class="text-primary text-center">
        标题<small>副标题</small>
    </h2>
</div>

强调

<small>本行内容是在标签内</small>
class样式
text-left向左对齐文本
text-center居中对齐文本
text-right向右对齐文本
text-uppercase英文转大写
text-lowercase英文转小写
text-capitalize首字母大写
text-hide文本隐藏
class样式
tex-primary主要
text-success成功
text-info提示
text-warning警告
text-danger危险

表格

可选的表格类

可选的表格类样式
table-striped条纹表格
table-bordered边框表格
table-hover悬停表格
table-condensed紧凑型表格
table-responsive响应式防压缩表格

修饰类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色

描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作
<table class="table table-striped table-bordered table-hover table-condensed">
   <caption>条纹表格布局</caption>
      <tr>
         <th>名称</th>
      </tr>
</table>

button按钮

定义按钮的样式

Class描述
btn标准的按钮。
btn-default默认的按钮
btn-primary提供额外的视觉效果,标识一组按钮中的原始动作。
btn-success表示一个成功的或积极的动作。
btn-info信息警告消息的上下文按钮。
btn-warning表示应谨慎采取的动作。
btn-danger表示一个危险的或潜在的负面动作。
btn-link并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为。
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮大小

Class描述
.btn-lg这会让按钮看起来比较大。
.btn-sm这会让按钮看起来比较小。
.btn-xs这会让按钮看起来特别小。
.btn-block这会创建块级的按,会横跨父元素的全部宽度。
<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</p>

按钮状态

Class状态
.active激活状态
disabled禁用状态
<button type="button" class="btn btn-default btn-lg active">
      激活按钮
 </button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮
</button>

按钮组

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
     <button type="button" class="btn btn-default btn-lg">
      大的按钮
   </button>
</div>
<!--不仅可以够成按钮组,还可以垂直-->
<div class="btn-group-vertical">
    
</div>
<!--批量设置按钮组按钮大小-->
<div class="btn-group btn-group-xs/lg">
    
</div>

Form表单

表单布局类型

form-group垂直表单
form-inline内联表单
form-horizontal水平表单

复选框CheckBox和单选框Radio

对一系列复选框和单选框使用 .checkbox-inline.radio-inline

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" >男
   </label>
    <label>
      <input type="radio" name="optionsRadios" >男
   </label>
</div>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" value="option1"> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox"  value="option2"> 选项 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox"  value="option3"> 选项 3
   </label>
</div>

垂直或基本表单

  • form元素添加 role="form"
  • 把标签和控件放在一个带有 class .form-group<div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素 <input><textarea><select> 添加 class .form-control
  • 表单里面的文字使用label标签,添加clsas .control-label
  • 水平表单需要使用栅格系统来分开

组合输入框

class样式说明
input-group组合
input-group-addon组合的元素
input-group-btn组合按钮的时候使用
<form>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <input type="text">
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-lock"></span>
            </div>
            <input type="text">
        </div>
    </div>
    <div class="form-group">
        <div class="input-group">
            <input type="text">
            <div class="input-group-btn">
                <button type="button" class="btn btn-info">
                    <span class="glyphicon glyphicon-floder-open"></span>
                </button>
            </div>
        </div>
    </div>
</form>

图像

图像应用简单样式

img-rounded图像圆角
img-circle让整个图像变成圆形
img-thumbnail灰色的边框
img-responsive响应式图片
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

实用工具类

Class设备
.visible-xs额外的小设备(小于 768px)可见
.visible-sm小型设备(769 px 起-990px)可见
.visible-md中型设备(991px 到 1200 px)可见
.visible-lg大型设备(1200px)可见
visible只是可见,在其它状态不可见
.hidden-xs额外的小设备(小于 768px)隐藏
.hidden-sm小型设备(769 px 起-990px)隐藏
.hidden-md中型设备(991px 到 1200 px)隐藏
.hidden-lg大型设备(1200px)隐藏
hidden只是在某一个范围隐藏,其它的范围可见
pull-left向左浮动
pull-right向右浮动
center-block呈现块级并居中
clearfix清除浮动
show强制元素显示
hide/hidden元素会隐藏
sr-only只在屏幕阅读器可见

Bootstrap 布局组件

按钮组下拉菜单

 <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>

垂直的按钮组

 <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下拉
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>

下拉菜单

下拉菜单主要的class有dropdown ,dropdown-menu,dropdown-toggle,使用的属性有data-toggle="dropdown"

<div class="dropdown">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       下拉菜单<span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
       <li><a href="#">第一项</a></li>
       <li><a href="#">第二项</a></li>
       <li class="divider"></li>
       <li><a href="#">第三项</a></li>
   </ul>
</div>

列表组

主要用是ul来进行使用,class样式有 list-unstyled,list-group,list-inline,list-group-item,list-group-item-heading还有不同的主题颜色

<ul class="list-group">
    <li class="list-group-item list-group-item-heading">第一项</li>
    <li class="list-group-item list-group-item-danger">第二项</li>
    <li class="list-group-item list-group-item-info">第三项</li>
    <li class="list-group-item list-group-item-success">第四项</li>
    <li class="list-group-item list-group-item-warning">第五项</li>
</ul>

如果希望排在一行,则使用list-inline.如果仅仅只是想去掉样式 ,则使用list-unstyled

导航元素

面板导航

<ul class="nav nav-tabs">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li><a href="#">第四项</a></li>
</ul>

胶囊式导航

<ul class="nav nav-pills">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li><a href="#">第四项</a></li>
</ul>

垂直这式导航

<ul class="nav nav-pills nav-stacked">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li><a href="#">第四项</a></li>
</ul>

面包屑

<ul class="breadcrumb">
     <li><a href="#">第一项</a></li>
     <li><a href="#">第二项</a></li>
     <li><a href="#">第三项</a></li>
     <li class="active"><a href="#">第四项</a></li>
</ul>

导航元素与面板的结合

导航元素与面板的样式结合在一起以后,我们可以实现点击切换的效果

<ul class="nav nav-tabs">
     <li class="active"><a href="#first" data-toggle="tab">第一项</a></li>
     <li><a href="#second" data-toggle="tab">第二项</a></li>
     <li><a href="#third" data-toggle="tab">第三项</a></li>
     <li><a href="#fourth" data-toggle="tab">第四项</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active in" id="first">
        这是第一项里面显示的内容
    </div>
    <div class="tab-pane" id="second">
        这是第二项里面显示的内容
    </div>
    <div class="tab-pane" id="third">
        这是第三项里面显示的内容
    </div>
    <div class="tab-pane" id="fourth">
        这是第四项里面显示的内容
    </div>
</div>

导航元素与面板可以结合,同时其它的元素也可以结果,同时也可以没有a标签,使用其它标签的时候,要使用自定义属性data-target

分页

分页使用到的属性是pagination,pagination-xs,pagination-lg

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

分页的状态可以改变大小,同时也可以改变位置,大小主要通过-xs-lg来完成,位置则主要通过浮动pull-right来完成

标签

我们可以使用label标签来进行页面的相标记,它有6种色调

class说明
label label-default默认
label label-primary主要的
label label-danger危险的
label label-success成功的
label label-info信息的
label label-warning警告的

进度条

主要的class样式为progress ,progress-bar来进行的

<div class="progress">
    <div class="progress-bar" style="width:40%"></div>
</div>
<!--这是一个primary色的效果 -->

还可以使用其它的在调

progress-bar-danger,progress-bar-warning,progress-bar-success,probress-bar-info

同时还有一个条纹的进度条

progress-bar-striped

如果我们希望进度看起来在动,可以在progress上面添加一个class效果 active

徽章

应用场景在导航栏上或者列表组上面,class样式为<span class="badage">10</span>

巨幕

<div class="###">
   <div class="container">
        <h1>欢迎登陆页面!</h1>
        <p>这是一个超大屏幕(Jumbotron)的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        学习更多</a>
      </p>
   </div>
</div>

超大屏幕(Jumbotron)

上拉下滑

bootstrap可以直接使用上拉下滑,主要使用到的样式是collapse,主要使用到的自定义属性data-toggle="collapse",data-target="#id"

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#c1">
    上拉下滑
</button>
<div class="collapse" id="c1">
    这是里面的内容
</div>

导航栏

主要的class样式

class样式说明
navbar基本样式
nav-default默认样式
nav-inverse黑色的主题
nav-static-top/nav-static-bottom去掉圆角
nav-fixed-top/nav-fixed-bottom固定在顶部/底部
nav-brand标题
nav-header头部的
navbar-nav导航栏里面的导航元素
navbar-right去导航栏的右边
navbar-form导航栏里面的表单
navbar-collapse响应式导航栏里面在PC端显示 ,在移动端隐藏
icon-bar一个横线
<nav class="navbar navbar-default">
	<div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">项目标题</a>
            <button class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#c1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="c1">
            <ul class="nav navbar-nav">
                <li><a href="#">中文网站</a></li>
                <li><a href="#">技术支持</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-congtrol">
                </div>
            </form>
        </div>
    </div>
</nav>
4

评论区