一、栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        /* .col-xs-6{
            /* height:300px; */
        /*} */
        .col-xs-6:first-child{
            background: red;
        }
        .col-xs-6:last-child{
            background: blue;
        }
        /* .col-md-1{
            height: 100px;
        }
        .col-md-8{
            height: 100px;
        }
        .col-md-4{
            height: 100px;
        }
        .col-md-6{
            height: 100px;
        }
        .col-md-1{
            background: green;
        }
        .col-md-8{
            background: yellow;
        }
        .col-md-4{
            background: blue;
        }
        .col-md-6{
            background: red;
        } */
    </style>
</head>
<body>
   
    <div class="container">
        <div class="row">
             <div class="col-xs-6 col-md-3"></div>
             <div class="col-xs-6 col-md-3" ></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
     
        <!-- Add the extra clearfix for only the required viewport -->
        <div class="clearfix visible-xs-block"></div>
     
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
       
    </script>
</body>
</html>
 
效果图

table表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <h1 class="text-danger">h1</h1>
    <h1 class="bg-danger">h1</h1>
    <a href="#" class="btn btn-danger">按钮</a>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <!-- <th>
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </th> -->
            <th>列1</th>
            <th>列1</th>
            <th>列1</th>
        </thead>
        <tbody>
            <!-- 作用的是td -->
            <tr class="danger">
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
            <!-- 作用的是tr -->
            <tr class="bg-danger">
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
            <tr>
                <td>列1</td>
                <td>列1</td>
                <td>列1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

bootstrap栅格系统，排版，代码，表格表单的更多相关文章

  1. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  2. Bootsrap表格表单及其使用方法

    bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入 参考官网标准引入方法和引入样式 排版 标题 Bootstrap和普通的HTM ...

  3. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  4. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  5. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  6. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  7. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  8. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  9. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  10. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

随机推荐

  1. c++中内联函数和宏函数的区别

    一. 区别: 是不是函数: 宏定义不是函数,但是使用起来像函数.预处理器用复制宏代码的方式代替函数的调用,省去了函数压栈退栈过程,提高了效率: 内联函数本质上是一个函数,内联函数一般用于函数体的代码比 ...

  2. 1.PS基本操作

    1.图片颜色变淡 1.新建一个白色的画板 什么尺寸都可以 只要能装得下你这张图 2.把这张图拖进去放到画板上 3.在右边找到这张图的图层 更改透明度到你觉得合适的程度 (我初步估计可能20%左右吧)

  3. powergui模块基本设置

    Powergui模块可以显示系统稳定状态的电流和电压及电路(电感电流和电容电压)所有的状态变量值. 尤其是电力电子仿真中需要加入powergui模块,否则会报错. simulink仿真用到simpow ...

  4. ABAP 指定字符替换为空格

    上代码 DATA:str1 TYPE string VALUE '小红##爱#six##小绿#666'. *******DATA(str1) = '小红##爱#six##小绿#666'. " ...

  5. 第6课第4节_Binder系统_驱动情景分析_服务注册过程_分析

    Service_manager.c 8074 2017/6/30 首先从应用程序分析(Android) binder_loop(bs, svcmgr_handler) { readbuf[0] = B ...

  6. C#windows 服务 《转载》

    转自:https://blog.csdn.net/Code_May/article/details/123909870 c#应用Windows服务 背景 一.创建windows服务 1.创建windo ...

  7. android 获取手机的唯一id，获取当前时间，获取两位随机数

    //获取机器的唯一id public static String getDeviceID() { String deviceID= ""; try{ //一共13位 如果位数不够可 ...

  8. Linux中的虚拟文件系统

    VFS的概念 LINUX下的文件系统可分为三大块: ①一是上层的文件系统的调用 ②二是虚拟文件系统交换器 ③三是挂载到VFS中各实际文件系统,例如ext2,jffs. VFS确切的叫法是"V ...

  9. 062_Apex使用Assert

    assert关键字用法简单,但是使用assert往往会让你陷入越来越深的陷阱中.应避免使用.总结了以下原因:   1.用assert代替if是陷阱之二.assert的判断和if语句差不多,但两者的作用 ...

  10. 机器学习——常见的backbone

    参考链接:https://www.zhihu.com/question/396811409/answer/1252521120 LeNet:5层轻量级网络,一般用来验证小型数据: AlexNet/VG ...