bootstrap

最新推荐文章于 2024-08-31 06:39:46 发布

夜归人_

最新推荐文章于 2024-08-31 06:39:46 发布

阅读量531

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/night_person_/article/details/49556325

前端专栏收录该内容

1 篇文章

订阅专栏

栅格系统

.container

.container-fluid 宽度100%

.row

.col-md-*

.col-md-offset-*

.col-sm-*

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

.lead 类可以让段落突出显示一般在<p>里边用

<del>被删除的文本

<ins>额外插入的文本

使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%

<em> 斜体

文本对齐类：

<p class="text-left">Left aligned text.</p>   text-center  text-right text-justify text-nowrap

改变文本大小写： text-lowercase text-uppercasetext-capitalize

基本缩略语：<abbrtitle="attribute">attr</abbr>

地址：<address> </address>

引用：

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

.blockquote-reverse 类可以让引用呈现内容右对齐的效果

有序列表：<ol><li>...</li></ol>

无序列表：<ul> <li>...</li></ul>  
无样式：<ul class="list-unstyled">
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行
描述：<dl> <dt>...</dt><dd>...</dd></dl>  .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行
内联代码<code></code>
用户输入：<kbd> 
代码块：<pre>

表格
代码块：.table
斑马线表格：<table class="table table-striped"></table>
带边框表格：.table-bordered
鼠标悬停：.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
紧缩表格：.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
状态类：.active .success .info .warning .danger
相应式表格：<div class="table-responsive"><table class="table"></table></div>
.table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

表单
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
<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="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单：.form-inline
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

input group   .input-group-addon
 <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>


水平排列表单：
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
输入框： <input type="text" class="form-control" placeholder="Text input">
文本域：<textarea class="form-control" rows="3"></textarea>
禁用，并提示不可点击： .disabled
div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

内联单选和多选框：.checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label>
下拉列表：<select class="form-control"><option>1</option><option>2</option> </select>
          <select multiple class="form-control">  显示多列
静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可
 <form class="form-horizontal">  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div>
  </div>
</form>
只读状态：readonly  和disabled 的区别 颜色更浅，鼠标不变成禁用的手
检验状态：添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式，has-feedback显示图标
<div class="form-group has-success has-feedback"></div>
<div class="form-group has-warning has-feedback"></div>
<div class="form-group has-error has-feedback"> </div>
空间尺寸：.input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度，添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸


按钮
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
预定义样式：class="btn btn-default" class="btn btn-primary" class="btn btn-success" class="btn btn-info" class="btn btn-warning"class="btn btn-danger" class="btn btn-link"
尺寸： .btn-lg  .btn-sm .btn-xs
.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
激活状态：class="btn btn-primary btn-lg active"

图片
相应式图片 .img-responsive 如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类.text-muted .text-primary .text-info .text-warning  .text-danger  .text-success .bg-primary .bg-success.bg-info.bg-warning.bg-danger
关闭按钮：<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
内容块剧中：<div class="center-block">...</div>
清除浮动： <div class="clearfix">...</div>
显示隐藏内容：.show 和 .hidden 类可以强制任意元素显示或隐藏(

Glyphicons 字体图标
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>标签，并将图标类应用到这个 <span> 标签上。 图标类只能应用在不包含任何文本内容或子元素的元素上。

菜单
 clearfix open 默认展开菜单 
<div class="dropdown clearfix open">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" >
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" >
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

导航条
表单：.navbar-form
按钮：<button type="button" class="btn btn-default navbar-btn">Sign in</button>
文本：.navbar-text
.navbar-left  .pull-right .navbar-fixed-top .navbar-fixed-bottom  .navbar-static-top .navbar-inverse
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页：<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类
分页大小：.pagination-lg 或 .pagination-sm

翻页：
    <nav>
      <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
      </ul>
    </nav>
previous，next 两端对齐
标签：
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

徽章：<span class="badge">

带关闭功能的警告框： 
<div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>

进度条
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 1%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
width: 1% 决定进度条显示的长度
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性
进度条也有颜色
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
进度条 条纹 ：progress-bar-striped
为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持
把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

媒体对象
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

列表组
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

面板
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>


模态框
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModa2">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

指定尺寸：
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

调用模态框： 两种方式
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
$('#myModal').modal(options)

WELL
<div class="well well-lg">...</div>