11.20 Bootstrap

时间:2019-11-20
本文章向大家介绍11.20 Bootstrap，主要包括11.20 Bootstrap使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1.动画效果

<div style="height: 1000px;background-color: gold;width: 500px"></div>

$('div').show(3000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').show(5000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').slideUp(5000)     #滑动
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').slideDown(5000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').fadeIn(5000)      #淡入淡出
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').fadeOut(5000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').fadeTo(5000,0.4)
k.fn.init [div, prevObject: k.fn.init(1)]

2.each

一个通用的迭代函数，它可以用来无缝迭代对象和数组。

<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>
</body>

$.each($('p'),function(index){
    console.log(index)
})
 0
 1
 2
 3
 4
 5
 6
 7
 8
 9
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$.each($('p'),function(index,obj){
    console.log(index,obj)
})
 0 <p>​1​</p>​
 1 <p>​2​</p>​
 2 <p>​3​</p>​
 3 <p>​4​</p>​
 4 <p>​5​</p>​
 5 <p>​6​</p>​
 6 <p>​7​</p>​
 7 <p>​8​</p>​
 8 <p>​9​</p>​
 9 <p>​10​</p>​
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]

$('p').each(function(index,obj){console.log(index,obj)})
 0 <p>​1​</p>​
 1 <p>​2​</p>​
 2 <p>​3​</p>​
 3 <p>​4​</p>​
 4 <p>​5​</p>​
 5 <p>​6​</p>​
 6 <p>​7​</p>​
 7 <p>​8​</p>​
 8 <p>​9​</p>​
 9 <p>​10​</p>​
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]

终止each循环

return false；

3.data

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key,value): 在匹配的元素上存储任意相关数据

.data(key): 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

.removeData(key):移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$('p').data('username','jason')  #设置
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$('p').first().data('username')   #获取
"jason"
$('p').last().data('username')
"jason"
$('p').last().data('ggd')   #不存在的不报错
undefined
$('p').removeData('username')   #移除
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$('p').last().data('username')
undefined

4.栅格系统

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。多于12个的列会被作为一个整体 另起一行排列。

使用单一的一组.col-md-*栅格类，就可以创建一个基本的栅格系统。所有列（column）必须放在.row内。

<div class='row'>
    <div class='col-md-1'>.col-md-1</div> #放12个
</div>
<div class='row'>
    <div class='col-md-8'>.col-md-8</div> 
    <div class='col-md-4'>.col-md-4</div>
</div>

流式布局容器：将最外面的布局元素.container修改为.container-fluid，就可以将固定宽度的栅格布局转换为100%宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

5.表格

为任意<table>标签添加.table类可以为其赋予基本的样式

table-hover 鼠标悬停

table-bordered 带边框的表格

table-striped 条纹装表格

.table-responsive 响应式表格

.table-condensed 紧缩表格

<table class="table table-hover table-bordered table-striped">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>书名</th>
                  <th>价格</th>
                  <th>出版社</th>
                  <th>作者</th>
                  <th class="text-center">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                  <td>1</td>
                  <td>dkjddjf</td>
                  <td>122.48</td>
                  <td>东方出版社</td>
                  <td>egon,echo</td>
                  <td class="text-center">
                    <a href="#" class="btn btn-primary btn-xs">编辑</a>
                    <a href="#" class="btn btn-danger btn-xs">删除</a>
                  </td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>聊斋志异</td>
                  <td>666.99</td>
                  <td>北方出版社</td>
                  <td>kevin,tank</td>
                  <td class="text-center">
                    <a href="#" class="btn btn-primary btn-xs">编辑</a>
                    <a href="#" class="btn btn-danger btn-xs">删除</a>
                  </td>
                </tr>
       
              </tbody>

            </table>

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。

<form class="form-inline">
            <div class="form-group">
              <div class="input-group">
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="关键字">
              </div>
            </div>
            <button type="submit" class="btn btn-primary">搜索</button>
                         <a href="" class="btn btn-success pull-right">新增</a>
          </form>

6按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-info" type="submit" value="Submit"> 
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

7字体图标

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

<span class="glyphicon glyphicon-book pull-right"></span>

8导航条、

务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

通过添加 .navbar-inverse 类可以改变导航条的外观。

<nav class="navbar navbar-inverse">
  ...
</nav>

9巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，就把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

10.面板

基本实例：默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

<div class="panel panel-primary">...</div>
<div class="panel-heading">Panel heading without title</div> #带标题的面板，可以覆盖.panel-title 类的 <h1>-<h6> 标签

原文地址：https://www.cnblogs.com/lidandanaa/p/11900566.html

随机文章
WEB前端知识点必读
最近更新