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. 4.1---二叉树是否平衡（CC150）

    //也就是把高度在递归过程中给一并算了.public class Balance { public static boolean checkBalance(TreeNode root, int[] d ...

  2. mysql中You can't specify target table for update in FROM clause错误

    原SQL delete from DEP_SYSTEM_PORTLET_SETTINGS where ID in ( select ID from DEP_SYSTEM_PORTLET_SETTING ...

  3. ffmpeg解码视频流

    //初始化.注册编解码器 avcodec_init(); av_register_all(); avformat_network_init(); //选取测试文件 char* FileName = & ...

  4. 关于 strcpy 段错误

    int main(){ char * s = "hello,world" ; char *t = "happy"; strcpy(s,t) ; // error ...

  5. ACM/ICPC 之 BFS(离线)+康拓展开(TSH OJ-玩具(Toy))

    祝大家新年快乐,相信在新的一年里一定有我们自己的梦! 这是一个简化的魔板问题,只需输出步骤即可. 玩具(Toy) 描述 ZC神最擅长逻辑推理,一日,他给大家讲述起自己儿时的数字玩具. 该玩具酷似魔方, ...

  6. Node.js 字体格式转换 ttf2eot ttf2woff ttf2svg

    前几天为了查找字体转换工具网上搜索,既然用 Node.js 来做的工具. https://github.com/fontello/ttf2eot https://github.com/fontello ...

  7. Java for LeetCode 209 Minimum Size Subarray Sum

    Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...

  8. HDU 4862 Jump（最小K路径覆盖）

    输入一个n×m网格图,每个结点的值为0-9,可以从任意点出发不超过k次,走完每个点且仅访问每个结点一次,问最终的能量最大值.不可全部走完的情况输出-1. 初始能量为0. 而结点(x,y)可以跳跃到结点 ...

  9. SSM 加载配置文件

    配置文件中 <bean id="address" class="org.springframework.beans.factory.config.Propertie ...

  10. cocos2d-x 第一篇 环境搭建

    官网:http://www.cocos2d-x.org/ 下载一个稳定版的cocos2d-x (网址:http://download.cocos2d-x.org/ Github Repository ...