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. Dom初

    DOM基础 •什么是DOM •浏览器支持情况 lDOM节点 •childNodes  nodeType –获取子节点 <!DOCTYPE html PUBLIC "-//W3C//DT ...

  2. 网页的title左边的小图片怎么添加

    首先,代码中的title标签里是不能加图片的.但是浏览器标提栏前面是可以加一个小图标的. 解决方案:第一步,做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透 ...

  3. 【Network】高性能 UDP 服务应该怎么搞？

    参考资料: Netty系列之Netty高性能之道 C++高性能服务框架revover:rudp总体介绍(可靠UDP传输) - zerok的专栏 - 博客频道 - CSDN.NET 高性能异步Socke ...

  4. linux pep8 检查工具

    感谢dongweiming大神.

  5. 【leetcode】Word Search

    Word Search Given a 2D board and a word, find if the word exists in the grid. The word can be constr ...

  6. ios 中的autoresizingMask

    以前对这个知识理解的不太对,看了下面这个地址的文章后,感觉说的对,也没检验,今天实验后,发现是错的...在这里对以前读过此文的朋友表示抱歉. 原文地址如下: http://www.cnblogs.co ...

  7. ios 关于使用异步网络请求时block回调的内存注意

    在一个controller中,使用 NSURLSessionDataTask *dataTask = [[NSURLSession sharedSession] dataTaskWithRequest ...

  8. HTML~From

    表单用于向服务器传输数据. http://www.w3school.com.cn/tags/tag_form.asp 文本域(Text fields) 本例演示如何在HTML页面创建文本域.用户可以在 ...

  9. SAP ALV OO 选择行打印

    &---------------------------------------------------------------------* *& Report  ZSDF001 * ...

  10. AFNetWorking支持解析html的方法

    在AFURLResponseSeriallzation.m的226行 手动添加@"text/html" 添加之前解锁文件