bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <!--媒体查询-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--
        为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--禁止缩放-->
        <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
        <title></title>  

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
        <!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
        <!--[if lt IE 9]
            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        -->  

    </head>
    <body>  

       <!--
          内联元素:让元素排成一行显示出来,且高度和宽度由内容决定,不能用css控制
          块状元素:独立占一行
          内联元素与块状元素对立
          内联(inline)表单:表单排在一行显示,只有在from中指定  class="form-inline"即可让表单成内联显示
               一定要添加 label 标签
               如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在,屏幕阅读器可能会采取使用 placeholder 属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。  

       -->
       <!--注意label中的for 与 input中的保持一致-->
       <form class="form-inline">
           <div class="form-group">
               <label for="exampleInputName2">Name</label>
               <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
           </div>
           <div class="form-group">
               <label for="exampleInputEmail2">Email</label>
               <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
           </div>
           <div class="checkbox">
               <label>
                   <input type="checkbox"> Check me out
               </label>
           </div>
           <button type="submit" class="btn btn-default">Send invitation</button>
       </form>
       <hr/>  

       <!--
          水平排列的表单:
          通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
       -->
       <!--指定from:form-horizontal ,就会横向显示-->
       <form class="form-horizontal">
           <div class="form-group">
               <!--前面占两个格,后面还有10个(总共12个)-->
               <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
               <!--把input
                嵌套在栅格系统里面
                一个栅格最多允许12个竖向分格
                col-sm-2:表示占两个栅格的宽度 ,则还有10个栅格 ,其中sm表示大小(如手机为xs,平板 sm ,桌面显示器 lg ,....)
                -->
               <!--余下的10格-->
               <div class="col-sm-10">
                   <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
               </div>
           </div>
           <div class="form-group">
               <label for="inputPassword3" class="col-sm-6 control-label">Password</label>
               <div class="col-sm-6">
                   <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
               </div>
           </div>
           <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                   <div class="checkbox">
                       <label>
                           <input type="checkbox"> Remember me
                       </label>
                   </div>
               </div>
           </div>
           <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                   <button type="submit" class="btn btn-default">Sign in</button>
               </div>
           </div>
       </form>
       <hr/>
      <!--
         表单元素有禁用状态,只读状态,校验状态....
      -->
       <!--
          可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
       -->
       <div class="form-group has-success has-feedback">
           <label class="control-label" for="inputSuccess2">Input with success</label>
           <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
           <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
           <span id="inputSuccess2Status" class="sr-only">(success)</span>
       </div>
      <hr/>
       <!--
          为水平排列的表单和内联表单设置可选的图标
       -->
       <form class="form-horizontal">
           <div class="form-group has-success has-feedback">
               <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
               <div class="col-sm-9">
                   <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
                   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                   <span id="inputSuccess3Status" class="sr-only">(success)</span>
               </div>
           </div>
           <div class="form-group has-success has-feedback">
               <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
               <div class="col-sm-9">
                   <div class="input-group">
                       <span class="input-group-addon">@</span>
                       <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
                   </div>
                   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                   <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
               </div>
           </div>
       </form>  

       <!--
       水平排列的表单组的尺寸
         通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
       只需要在formgroup容器上面添加对应的属性即可
       -->
      <hr/>
       <!--
       调整列(column)尺寸
         用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度。
       -->
       <div class="row">
           <div class="col-xs-2">
               <input type="text" class="form-control" placeholder=".col-xs-2">
           </div>
           <div class="col-xs-3">
               <input type="text" class="form-control" placeholder=".col-xs-3">
           </div>
           <div class="col-xs-4">
               <input type="text" class="form-control" placeholder=".col-xs-4">
           </div>
       </div>  

       <!--
       响应式图片:,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
       图片形状:通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。
       -->
       <!--如果图片的宽高相同,则为规则的圆,否则可能为随圆-->
       <img src="http://img0.bdstatic.com/img/image/70dddc10daaeab1ab987cedb1511d2621426747009.jpg" alt="..." class="img-rounded">
       <img src="http://img0.bdstatic.com/img/image/70dddc10daaeab1ab987cedb1511d2621426747009.jpg" alt="..." class="img-circle">
       <img src="http://img0.bdstatic.com/img/image/70dddc10daaeab1ab987cedb1511d2621426747009.jpg" alt="..." class="img-thumbnail">  

       <!--
         文本颜色:根据按钮差不多,只不过以text-开头,而按钮颜色以btn-开头
       -->
       <p class="text-muted">0dddc10daaeab1</p>
       <p class="text-primary">0dddc10daaeab1</p>
       <p class="text-success">通过为相应的类,可以让图片呈现不同的</p>
       <p class="text-info">通过为的类,可以让图片呈现不同的</p>
       <p class="text-warning">过为.</p>
       <p class="text-danger">过为</p>  

       <!--
         背景颜色:
            <p class="bg-primary">...</p>
            <p class="bg-success">...</p>
            <p class="bg-info">...</p>
            <p class="bg-warning">...</p>
            <p class="bg-danger">...</p>
       -->  

       <!--
         关闭按钮:可以在div右上角出现一个关闭的按钮
       -->
       <div class="bg-info" style="width: 200px;height: 200px;">
           <button type="button" class="close" aria-label="Close">
               <span aria-hidden="true">×</span>
           </button>
       </div>
       <!--
        快速浮动:
           <div class="pull-left">...</div>
           <div class="pull-right">...</div>
       -->
      <!--
        让某个元素内容居中
      -->
       <div class="center-block" style="width: 500px;height: 100px;">让某个元素内容居中</div>  

       <!--
       清除浮动:通过为父元素添加 .clearfix 类可以很容易地清除浮动(float)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
       -->
       <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
       <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
       <!-- 加载Bootstrap核心库 -->
       <script src="js/bootstrap.min.js"></script>  

       <!--隐藏或显示-->
        <div class="show text-warning">
            this is a show div
        </div>
        <div class="hidden">
            this is a hidden div
        </div>  

       <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>  

       <!--
         响应式:
         响应式工具
       为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
       有针对性的使用这类工具类,从而避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类可以在不同设备上提供不同的展现形式。
       -->
    </body>
    </html>  
时间: 2024-10-13 00:12:13

bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]的相关文章

【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点 中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 —— 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间. A.1 优化图片 这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一

&lt;Bootstrap&gt; 学习笔记一. 配置环境, 简单使用, 响应式表格, 响应式图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--以移动设备为优先 宽度和设备屏幕宽度一致, 初始缩放为1:1, 禁止用户缩放--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scala

Bootstrap内联表单

有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可. <form class="form-inline" role="form"> <div class="form-group"> <label class=&q

bootstrap实现去点列表、内联列表、水平定义列表

内联列表:通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示. 去点列表:通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格 水平定义列表:给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果 注:只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果.当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态.

Bootstrap中实现圆角、圆形头像和响应式图片/css3圆角、图片阴影效果总结

1.Bootstrap提供了四种用于<img>类的样式,分别是:.img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形.img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框.img-responsive:图片响应式 (自适应各类大小的屏幕) 使用方法:(1)Bootstrap库的导入就不说啦,原

吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

bootstrap: 内联表单;

<form class="form-inline"> <div class="form-group"> <label for="time">Time</label> <input type="text" class="form-control" placeholder="time"> </div> <div c

Bootstrap 内联标签和徽章

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap badges Example</title> <meta name="description" content="Bootstrap badges Example. All types of badge

bootstrap 响应式图片自适应图片大小

<img src="..." class="img-responsive center-block" > 或者 $(window).load(function(){       $(".panel-body img").addClass("img-responsive center-block");   }) 我的应用 <img id="logo" src="../../asse