Bootstrap css栅格 + 网页中插入代码+css表格

时间：2023-02-23 10:44:52

设计达人

http://www.shejidaren.com/30-minimal-app-icons.html

CSS栅格：

<!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">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

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

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <style>

        .row {

            margin-bottom: 20px;

        }

        .row .row {

            margin-top: 10px;

            margin-bottom: 0px;

        }

        [class*="col-"] {

            padding-top: 15px;

            padding-bottom: 15px;

            background-color: #eee;

            background-color: rgba(86, 61, 124, .15);

            border: 1px solid #ddd;

            border: 1px solid rgba(86, 61, 124, .2);

        }

    </style>

    <body>

        <div class="container">

            <div class="row">

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

                <div class="col-md-1">col-md-1</div>

            </div>

        </div>

    </body>

</html>

CSS网页中插入代码：

Bootstrap css栅格 + 网页中插入代码+css表格

<!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">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

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

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <div class="container">

            <!--内联代码-->

            For example <code>&lt;section&gt;</code>as inline;

            </br>

            我希望现在能键入<kbd>cmd</kbd>命令

            <pre>

            Sample text here...代码段

            </pre>

            <var>x</var> = <var>y</var>+<var>z</var>

            </br>

            <samp>输出：Hello world</samp>

        </div>

    </body>

</html>

CSS表格：

1.Bootstrap css栅格 + 网页中插入代码+css表格

2.3.4

Bootstrap css栅格 + 网页中插入代码+css表格

5.表格紧凑，6.警告提醒等颜色

Bootstrap css栅格 + 网页中插入代码+css表格

<!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">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

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

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <div class="container">

            <table class="table table-striped table-bordered table-hover">

                     <!--1无边框表格,2斑马线,3加边框,4鼠标悬停-->

                <thead>

                    <tr>

                        <th>表格标题</th>

                        <th>表格标题</th>

                        <th>表格标题</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    </tr>

                    <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    </tr>

                    <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    </tr>

                    <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

</html>

7.表格滚动条：

Bootstrap css栅格 + 网页中插入代码+css表格

<!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">

        <title>Bootstrap的HTML标准模板</title>

        <!-- Bootstrap -->

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

        <!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <div class="container table-responsive">

            <!--表格-->

            <table class="table table-striped table-bordered table-hover table-condensed">

                <!--1无边框表格,2斑马线,3加边框,4鼠标悬停,

                         5表格紧凑，6警告提醒等颜色

                     -->

                <thead>

                    <tr class="active">

                        <th>表格标题</th>

                        <th>表格标题</th>

                        <th>表格标题</th>

                    </tr>

                </thead>

                <tbody>

                    <tr class="info">

                        <td>表格单元格表格标题表格标题</td>

                        <td>表格单元格表格标题表格标题</td>

                        <td>表格单元格表格标题表格标题</td>

                    </tr>

                    <tr class="warning">

                        <td>表格单元格表格标题</td>

                        <td>表格单元格表格标题</td>

                        <td>表格单元格表格标题</td>

                    </tr>

                    <tr class="danger">

                        <td>表格单元格表格标题</td>

                        <td>表格单元格表格标题</td>

                        <td>表格单元格表格标题</td>

                    </tr>

                    <tr class="success">

                        <td>表格单元格表格标题</td>

                        <td>表格单元格表格标题</td>

                        <td>表格单元格表格标题</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </body>

</html>

Bootstrap css栅格 + 网页中插入代码+css表格的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. CSS在网页中应用的方式&lowbar;嵌入式

    内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...

  3. 网页中插入Flash动画（&period;swf）代码和常用参数设置

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  4. 使用&lt&semi;script&gt&semi;标签在HTML网页中插入JavaScript代码

    新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...

  5. 在网页中插入背景音乐代码&lpar;html&rpar;

    有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如 ...

  6. prism&period;js——让网页中的代码更好看

    粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...

  7. 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

    一:网页中插入flash代码如下:  当然里面的很多属性可以去掉,根据具体的需求而定.  我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...

  8. &lbrack;转载&rsqb;在网页中插入media，RealPlayer等控件

    [转载]在网页中插入media,RealPlayer等控件 (2012-11-02 20:27:43) 转载▼ 标签: 转载   原文地址:在网页中插入media,RealPlayer等控件作者:Mo ...

  9. 网页中插入javascript的几种方法

    网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...

随机推荐

  1. 一步步学习javascript基础篇（4）：面向对象设计之创建对象（工厂、原型和构造函数等模式）

    前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...

  2. Windows操作 - Photoshop为图片添加透明立体水印

    原文地址:http://design.yesky.com/photoshop/252/2427752.shtml 本文我们介绍用Photoshop为图片添加透明立体水印的方法和技巧. 原图: 打开原图 ...

  3. BZOJ 1494 生成树计数（生成树计数-矩阵）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1494 题意: 思路: int SIZE; struct matrix { i64 a[N] ...

  4. &lbrack;Unity菜鸟&rsqb; Character控制移动

    1. 给角色加角色控制器组件,然后用以下代码可以控制角色移动和跳跃 float speed = 6.0f; float jumpSpeed = 8.0f; float gravity = 20.0f; ...

  5. Xcode快捷键 &lpar;本人总结常用的&rpar;

    以下分类显示最常用的快捷键: 1. 文件 CMD + N: 新文件 CMD + SHIFT + N:     新项目 CMD + O: 打开 CMD + S: 保存 CMD + SHIFT + S: ...

  6. ORA-00904&colon; &quot&semi;WMSYS&quot&semi;&period;&quot&semi;WM&lowbar;CONCAT&quot&semi;&colon; invalid identifier

    同事玩Docker,在Docker里面启了一个Oracle 10g Express版本,在测试过程中遇到了ORA-00904: "WMSYS"."WM_CONCAT&qu ...

  7. &lbrack;转帖&rsqb; 大神 Linus Torvalds 语录

    My name is Linus Torvalds and I am your god.我的名字是Linus Torvalds,我是你们的上帝.(在1998 Linux大会上的自我介绍) If you ...

  8. 包学会之浅入浅出Vue&period;js：升学篇

    包学会之浅入浅出Vue.js:升学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  9. Adaboost入门教程——最通俗易懂的原理介绍（图文实例）

    https://blog.csdn.net/px_528/article/details/72963977 写在前面 说到Adaboost,公式与代码网上到处都有,<统计学习方法>里面有详 ...

  10. js面向对象设计之class继承

    EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖,所以它们并没有带来任何的新特性 ...

相关文章