bootstrap 入门

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>bootstrap</title>

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

    <script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script>

    <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body style="background-color: #ccc;">

<div class="container" style="background-color: #fff;">

    <div class="text-center">bootstrap移动设备优先 封装html css js</div>

    <ul class="list-inline">  <!--左浮动-->

        <li>html</li>

        <li>css</li>

    </ul>

    <hr/>

    <div class="table-responsive">

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

        <tr>

            <td>名字</td><td>年龄</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td>

        </tr>

        <tr class="danger">

            <td>cat</td><td>12</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td>

        </tr>

        <tr>

            <td>cat2</td><td>22</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td>

        </tr>

    </table>

    </div>

    <form>

        <div class="form-group">

            <label for="exampleInputEmail1">Email address</label>

            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

        </div>

    </form>

    <p>栅格</p>

    <div class="row">

        <div class="col-md-4">.container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

            .list-inline(行内块）

            .active

            .success 成功颜色

            .warning 警告颜色

            响应式表格

            meta http-equiv="X-UA-Compatible" content="IE=edge"</div>

        <div class="col-md-4 col-md-offset-4">.container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

            .list-inline(行内块）

            <p>表格</p>

            .table .table-striped 表格隔行变色

            .table-bordered 带边框的表格

            .table-hover 鼠标悬停效果

        </div>

    </div>

    <hr/>

    <div class="row">

        <div class="col-md-4">.container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

        </div>

        <div class="col-md-8">

            <div class="row">

                <div class="col-md-6" style="height: 100px; background-color: red;"></div>

                <div class="col-md-6" style="height:100px;background-color: green;"></div>

            </div>

            .container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

        </div>

    </div>

    <hr/>

    <form class="form-horizontal">

        <div class="form-group">

            <label for="email" class="col-sm-2 control-label">Email address</label>

            <div class="col-sm-10">

                <input type="email" class="form-control" id="email" placeholder="Email">

            </div>

        </div>

        <div class="form-group">

            <label for="password" class="col-sm-2 control-label">password</label>

            <div class="col-sm-10">

                <input type="email" class="form-control" id="password" placeholder="password">

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">upload</label>

            <div class="col-sm-10">

                <input type="file">

                <p class="help-block">the pic is jpg/gif/png</p>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">checkbox</label>

            <div class="col-sm-10">

                <label class="checkbox-inline"><input type="checkbox" > 1 </label>

                <label class="checkbox-inline"><input type="checkbox" > 2 </label>

                <label class="checkbox-inline"><input type="checkbox" > 3 </label>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">intro</label>

            <div class="col-sm-10">

                <textarea rows="5" placeholder="please input your mes"></textarea>

            </div>

        </div>

        <div class="col-sm-10 col-sm-offset-2">

            <button class="btn btn-danger btn-lg" type="button">submit</button>

        </div>

    </form>

    <hr/>

    <h2 class="page-header">图片</h2>

    <div class="">

        <img class="img-responsive img-circle center-block" src="../img/1.png" width="500"/>

        <p>meta name="viewport" content="width=device-width,initial-scale=1"

            IE兼容模式

            meta http-equiv="X-UA-Compatible" content="IE=edge"</p>

    </div>

    <hr/>

    <p class="lead mark">hello</p>

    <abbr class="initialism" title="search engine ">seo</abbr>

    <blockquote class="blockquote-reverse">

        <h1>西游记</h1>

        <footer>吴承恩</footer>

    </blockquote>

    <dl class="dl-horizontal">

        <dt>标题1</dt>

        <dd>1</dd>

        <dt>标题2</dt>

        <dd>2</dd>

    </dl>

    <hr/>

    <!--关闭按钮-->

    <p style="min-height: 150px; background-color: #36a701">

        <button type="button" class="close" id="close" >&times;</button>

    </p>

    <script>

        //    关闭

        $("#close").click(function () {

            $("#close").parent().hide();

        });

    </script>

    <!--大屏幕显示大按钮，小屏幕显示小按钮-->

    <button type="button" class="btn btn-primary visible-md-block btn-lg">button</button>

    <button type="button" class="btn btn-success visible-sm-block btn-md">button</button>

    超小屏幕隐藏 my title

    <h1 class="hidden-xs">my title</h1>

</div>

<hr/>

.container 固定宽度且响应式

.container-fluid 100%宽度

.h1 ～　.h6

.text-left 文本左对齐

.list-unstyled 无符号

.list-inline(行内块）

<p>表格</p>

.table .table-striped 表格隔行变色

.table-bordered 带边框的表格

.table-hover 鼠标悬停效果

.table-condensed 紧凑的表格

行或单元格背景色 状态类

.active

.success 成功颜色

.warning 警告颜色

响应式表格

.table 放在 .table-responsive元素内，可创建响应式表格

当屏幕宽小于768px 表格会出现滚动条

<p>表单</p>

.form-group 表单分组

.form-control 表单样式 input

.form-inline  用于form元素，使元素一行排列

.form-horizontal 水平排列的表单 详情见  http://v3.bootcss.com/css

.sr-only 隐藏

<p>响应式布局</p>

meta name="viewport" content="width=device-width,initial-scale=1"

IE兼容模式

meta http-equiv="X-UA-Compatible" content="IE=edge"

栅格

列偏移

.col-md-offset-2  向右偏移2个列

.lead 加深

.mark 高亮 百度快照  想改变默认样式 ，直接样式表重写  .mark{}

h5标准：

br readonly

html lang="zh-CN"

引入 css js 不需要 type 属性 使用根路径

属性顺序:重要的先写 <div class="" id="" name="" src="" alt="" aria-label="" role=""></div>

少用标签 避免js生成标签

不用 submit  <button id="123" type="button">button</button>

样式表 body {} 右花括号占一行 每条样式都换行   heaer, footer {}  opacity: .1;  表示 0.1   color:#abc; 小写，简写

class 命名方式：text-center 父级元素加样式  .h1-div-a   <h1><div><a>aa</a></div></h1>

简单的写一行就行  .div {color:red;}

</body>

</html>

bootstrap 入门的更多相关文章

  1. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  2. Bootstrap入门（二）栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  3. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  4. Bootstrap入门（三十）JS插件7：警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  5. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  6. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  7. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  8. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  9. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

随机推荐

  1. sublime-text3设置浏览器预览html

    选择:Tools - Build System - New Build Syatem... 或者:工具 - 编译系统 - 新编译系统 然后粘贴代码 { "cmd": [" ...

  2. iOS 中 为UIView添加背景图片

    创建UIImage的方法有两种: UIImage *image = [UIImageimageNamed:@"image.jpg"];//这种不释放内存,要缓存 NSString ...

  3. Remove Invalid Parentheses

    Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...

  4. Leetcode Unique Word Abbreviation

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  5. POJ 1062 ( dijkstra )

    http://poj.org/problem?id=1062 一个中文题,一个多月之前我做过,当时我是用搜索写的,不过苦于卡在无法确定等级关系,所以就错了. 看了别人的博客后,我还是不是很理解所谓的枚 ...

  6. XP共享连接数限制

  7. Effective C++ -----条款14: 在资源管理类中小心copying行为

    复制RAII对象必须一并复制它所管理的资源,所以资源的copying行为决定RAII对象的copying行为. 普遍而常见的RAII class copying行为是:抑制copying(使用私有继承 ...

  8. HTML DOM scale() 方法

    语法 scale(sx, sy) 参数 参数 描述 sx, sy 水平和垂直的缩放因子. 描述 scale() 方法为画布的当前变换矩阵添加一个缩放变换.缩放通过独立的水平和垂直缩放因子来完成.例如, ...

  9. linux 增加用户 useradd 用法小结及配置文件说明

    转自CSDN,http://blog.csdn.net/warden2010/article/details/5132290,谢谢作者 在Linux 系统中,所有的用户和组像一个国家.如果国家要繁荣昌 ...

  10. 【linux】学习1

    郁闷啊 好多东西要学 下面大概就是鸟哥那本书的第五章内容吧 linux命令: Ctrl + Alt + F1 ~ F6 : 切换终端 ls  -al  ~ :显示主文件夹下的所有隐藏文件 date: ...