一、栅格系统

栅格系统用于通过一系列的行（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. python之路3：文件操作和函数基础

    文件操作 字符编码解码 函数基础 内置函数 一.文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 打开文件的模式有: r,只读模式(默认). w,只写 ...

  2. IDEA使用fastjson1时maven引入依赖没报错,但是用不了JSONObject工具类

    删除项目下的.idea文件夹重新打开项目就行, 不知道为什么

  3. MVC页面加载速度优化小记

     前言: 最近做一个地图展示页面,业务初期没什么问题,运行一阵后报错: Error during serialization or deserialization using the JSON Jav ...

  4. 5-6：实现多窗口之异常（AttributeError: 'list' object has no attribute 'click'）

    代码: #coding = utf-8 from selenium import webdriver import time ##############5-6:实现多窗口切换_start###### ...

  5. 写一个PHP单例模式

    1 <?php 2 /** 3 * Created by PhpStorm. 5 * Date: 2019/1/29 6 * Time: 17:44 7 */ 8 9 namespace App ...

  6. docker方式安装awvs和nessus渗透工具

    docker-compose.yaml文件 version: '2' services: awvsnessus: image: leishianquan/awvs-nessus:v4 environm ...

  7. display 属性区别

    行内元素 inline,行内块元素 inline-block,块级元素 block 的区别 (可通过 display 属性相互切换) (三个都会自动换行) padding 会挤压设置的宽高,实际宽高= ...

  8. 肖sir__ 代码题 ___华为od练习

    www.online1987.com 这个网站,有概率看到机考原题,后续内招,这个网站做到了原题

  9. js已知多边形坐标点，求多边形的中心点坐标

    你需要传入的数据类型如下: // 取面对象 中心点 var calculateCenter = function (lnglatarr) { var total = lnglatarr.length; ...

  10. C# 使用CefSharp完成自动签到

    1首先新建项目,右键项目选择管理NuGet 程序包,在浏览中搜索CefSharp.Winfrom ,点击安装,会自动安装相应的包.因为CefSharp是不能以AnyCPU的模式运行所以需要修改配置,有 ...