bootstrap table js设置为显示卡片_最受欢迎的 HTML、CSS 和 JS 框架

  前段时间，小编复习了一下前端框架--bootstrap，今天给大家分享一下！

   有些时候，当我们打开一个网页，最开始注意的大概就是网页的设计布局了，然后就会感慨，怎么他们是这么好，页面太绚丽了！！

  在没有接触框架之前，页面的布局，格式的设定基本是根据css和javascript等来进行页面的美化，这样代码量就大大增加，所以就诞生了一个方便开发人员进行页面编写的框架。---------Bootstrap

简介：

  Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。他是一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。这样就减少了大量代码的编写。

  它的一些好处：

1. 定义了很多的css样式和js插件。开发人员直接可以使用这些样式和插件得到丰富的页面效果。

2. 响应式布局。： 同一套页面可以兼容不同分辨率的设备。

  接下来入门：

   大家可以访问它的中文网：https://www.bootcss.com进行学习。也可以下载它的离线文档，方便在没有网的情况下使用。然后把下面三个文件夹拷贝到项目中。

接下来就是引入了：

<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js">script>

好处1.响应式布局：依赖于栅格系统：

那么什么是响应式布局呢，简单来说就是同一套页面可以兼容不同分辨率的设备

栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。

它的使用步骤：

1. 定义容器。相当于之前的table

* 容器分类：

1. container：两边留白

2. container-fluid：每一种设备都是100%宽度

    2. 定义行。相当于之前的tr   样式：row

    3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

* 设备代号：

1. xs：超小屏幕 手机 (<768px)：col-xs-12

2. sm：小屏幕 平板 (≥768px)

3. md：中等屏幕 桌面显示器(笔记本) (≥992px)

4. lg：大屏幕 大桌面显示器(台式机) (≥1200px)

    <div class="container">                <div class="row">                        <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>            <div class="col-lg-1 col-sm-2">栅格div>          div>    div>

好处2.CSS样式和js插件(样式等有很多，详细的参考中文网)

1.全局css样式

(1). 按钮：  默认样式，

下面是一些按钮的样式，使用时可以参考文档，当然还有其他的一些样式比如尺寸等。

<button type="button" class="btn btn-primary">(首选项)Primarybutton><button type="button" class="btn btn-success">(成功)Successbutton><button type="button" class="btn btn-info">(一般信息)Infobutton><button type="button" class="btn btn-warning">(警告)Warningbutton><button type="button" class="btn btn-danger">(危险)Dangerbutton><button type="button" class="btn btn-link">(链接)Linkbutton>

(2). 图片：：图片在任意尺寸都占100%

  图片形状：

*  ：方形

*  ：圆形

*  ：相框

(3). 表格:

* table：基本的样式

* table-bordered： 类为表格和其中的每个单元格增加边框。

* table-hover：鼠标悬停状态下作出响应。

                             *......

(4). 表单:

*  :类可使其内容左对齐并且表现为 inline-                       block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时                                (视口宽度再小的话就会使表单折叠)。

                        *  :并联合使用 Bootstrap 预置的栅格                                       类，可以将label 标签和控件组水平并排布局

                        * ...... 

(5).........

2.组件

* 导航条:类似下面的样子。现实生活中，每个网站都会用到导航条。

默认样式的导航条：

class=  <div class="container-fluid">        <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigationspan>        <span class="icon-bar">span>        <span class="icon-bar">span>        <span class="icon-bar">span>      button>      <a class="navbar-brand" href="#">Branda>    div>        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>        <li><a href="#">Linka>li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>          <ul class="dropdown-menu">            <li><a href="#">Actiona>li>            <li><a href="#">Another actiona>li>            <li><a href="#">Something else herea>li>            <li role="separator" class="divider">li>            <li><a href="#">Separated linka>li>            <li role="separator" class="divider">li>            <li><a href="#">One more separated linka>li>          ul>        li>      ul>      <form class="navbar-form navbar-left">        <div class="form-group">          <input type="text" class="form-control" placeholder="Search">        div>        <button type="submit" class="btn btn-default">Submitbutton>      form>      <ul class="nav navbar-nav navbar-right">        <li><a href="#">Linka>li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>          <ul class="dropdown-menu">            <li><a href="#">Actiona>li>            <li><a href="#">Another actiona>li>            <li><a href="#">Something else herea>li>            <li role="separator" class="divider">li>            <li><a href="#">Separated linka>li>          ul>        li>      ul>    div>  div></nav>

* 分页条：分页条用的也比较多，当数据检索或者其他数据操作的时候，一页展示不出来，这是分页条就提供了方便。

默认的分页条：

<nav aria-label="Page navigation">  <ul class="pagination">    <li>      <a href="#" aria-label="Previous">        <span aria-hidden="true">«span>      a>    li>    <li><a href="#">1a>li>    <li><a href="#">2a>li>    <li><a href="#">3a>li>    <li><a href="#">4a>li>    <li><a href="#">5a>li>    <li>      <a href="#" aria-label="Next">        <span aria-hidden="true">»span>      a>    li>  ul>nav>

* ......

3.插件

*轮播图：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">    <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>    <li data-target="#carousel-example-generic" data-slide-to="1">li>    <li data-target="#carousel-example-generic" data-slide-to="2">li>  ol>    <div class="carousel-inner" role="listbox">    <div class="item active">      <img src="..." alt="...">      <div class="carousel-caption">      div>    div>    <div class="item">      <img src="..." alt="...">      <div class="carousel-caption">      div>    div>  div>    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>    <span class="sr-only">Previousspan>  a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>    <span class="sr-only">Nextspan>  a>div>

好了，今天就分享到这里，总结的不是太全面，请见谅！欢迎大家投稿交流！！