zoukankan      html  css  js  c++  java
  • 囫囵吞枣——Bootstrap

    终于绕回来了。额。但是  HTML还有些没看完。

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。

    <meta>标签

     1.width=device-width    确保它能正确呈现在不同的设备上

     2.intital-scale=1.0           在网页加载时,以1:1比例呈现

     3.user-scalable=on    禁用缩放功能

    响应式图像

    <img src="..." class="img-responsive" alt="响应式图片">

    height:auto:             高度取决于浏览器。

    max-width:100%;     最大宽度。

    容器:Container

    例子:

    网格:

    随着屏幕视口尺寸的增加:系统最多可以分为12列。

    网格必须放在  container 内,以便获得对齐和内边距。

    移动设备优先策略:1.优先设计更小宽度。2.基础的css是移动设备优先,媒体查询是针对于平板电脑,台式电脑。3.随着屏幕大小的增加而添加元素。

            放张图,表达一下心情。

    媒体查询

     暂时不知这个有什么用,待定学习。

       学习下一个。

    网格选项

     网格基本结构:

    强调文本:class="lead"

    内联样式:<small></small>  设置文本为父文本大小的 85%

    粗体:<strong>(设置文本为更粗的文本)

    斜体:<em>(设置文本为斜体)

    尖括号  <>  :&lt;   &gt;  

                             

    内联样式:<code>  </code>  

    变量赋值:<var>    

                                  

    提示键:<var>

                 使用方法:   

                 显示效果:

    输出:<pre>:添加 .pre-scrollable 类,  pre 元素最大的高度 max-height 为 350px ,并生成一个 Y 轴的滚动条

    电脑输出样式: <samp>

                   使用方法:<samp>要显示的值</samp>

                  显示效果:

    显示代码段: <code>   同一行代码片段: spandiv

    表格:

    表格样式:

    • .table  (基本样式,有横向分割线,如箭头所指)

               

    • .table-striped    (行内添加斑马线)

          

    • .table-bordered  (所有表格添加边框)

              

    • .table-condensed  (让表格更加紧凑)

        

    •  .table-hover    (鼠标停留在任意行中的状态  ps:截图时候没有截取到鼠标)

     

    注:可以联合使用样式

     表格内样式    (看完感觉最大的区别是颜色不一样了)

    •  active   (悬停的颜色在行或者单元格上,鼠标移动不会移动-)
    • success  (表示成功的操作)
    • info  (表示信息变换的操作)
      •   
    • warning
    • danger

                 

    表单:

    •  垂直表单

                在父<form>元素添加 role="form"

                把标签和控件放在一个带有class  .form-group  的<div>中。

                所有的文本元素<input> <textarea>和<select> 添加 classs="form-control"

                 例子:<form>

                           <div  class="form-group">

                               <input type="text" class="from-control" placeholder="请输入名称">  

                               </div>

                               </form>

                    

    •  内联表单
      • from标签添加class  。form-inline
      • 默认情况下,input ,select ,textarea  有100%宽度,在使用内联表单时,需要在表单控件上设置一个宽度
      • 使用 class  .sr-only  您可要隐藏内联表单的标签
    •   水平表单
    1. 像父<from> 元素添加  class    .form-horizontal  
    2. 把标签和控件放在一个带有class  .form-group 的<div>中
    3.  把标签添加class    .control-label  
    4.          

    注:Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select

     表单控件:

    Input

    • text(文本)、
    • password(文本框)、
    • datetime()、
    • datetime-local(时间选择器  年月日时间)、
    • date(时间选择器,年月日)、
    • month(时间选择器,年月)、
    • time(设置时间)、
    • week(允许设置周和年)、
    • number(数值控件)、
    • email(邮件,带基本验证)、
    • url(设置url)、
    • searchtel()、 
    • color(颜色选择器)、

     Textarea

    •  

     Checkbox  复选框   单选框 Radio

    复选框:<input type="Checkbox">

    单选框:<input type="Radio">

    选择框:正常的select  

                    multiple效果:

                     注:两者的区别   

    静态控件:

            水平文本表单内放置纯文本,请在<p>标签上使用 class   .from-control-static

            菜鸟给的效果: 

               代码:

       

  • 相关阅读:
    js实现字符串反转
    网页中嵌入百度地图
    Javascript创建对象方法
    使用@font-face来实现icon
    关于课程实验的反思
    Factory设计模式构建
    正则表达式的应用
    IO流
    解读main()方法中的String[] args
    技术与运营
  • 原文地址:https://www.cnblogs.com/srx121201/p/7592767.html
Copyright © 2011-2022 走看看