热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

bootstrap2文档的学习

就像刚开始的优雅,直观,强大的前端框架,让web开发更快,更容易,bootstrap给我的感觉就是把常用的布局,组件(导航,列表,按钮,表格),还有规范化颜色等等,同时它的遍历不至于此,他还支持
就像刚开始的 优雅,直观,强大的前端框架,让web开发更快,更容易,bootstrap给我的感觉就是把常用的布局,组件(导航,列表,按钮,表格),还有规范化颜色等等,同时它的遍历不至于此,他还支持了自定义,利用less,全局定义这些变量,让你自定义区修改,同时还有更多的图标插件可以用。在布局方面,更好的迎合了目前市场上移动端的出现,有了流网格,我们就不用再去考虑去兼容不同屏幕的展示端。
 
一 、框架
bootsrap构建于12列响应式网格,布局和组件。同时基于html5和jquery
...
所以文件头必须是html5
  • 移除了body的margin
  • 设置body的背景颜色为 background-color: white;
  • 使用@baseFontFamily@baseFontSize, 和 @baseLineHeight 属性作为我们排版的基础
  • 通过 @linkColor 设置全局链的接颜色, 并适用于:hover情况下的下划线
然后在scaffolding.less文件里设置了一些基础的全局展示效果、排版、链接样式
 
整体布局分为两类,和position属性是一样的,分为默认的网格系统和流式网格系统,主要区别是流式网格系统是按照百分比,每一行都是12个,这个下面会说:
1 网格系统
Bootstrap的网格(栅格)系统在默认情况下采用 12 列, 可制作宽度为940px的容器, 同时没有 响应式功能. 当加入响应式CSS文件, 网格会根据视口大小适应724px与1170px宽度. 当视口低于767px宽度, 列会成为流式, 并上下垂直放置.

对于一个简单的两列布局, 创建一个.row和添加带有(合适)数字的.span*作为列. 因为这是一个12列的网格, 所以每一个 .span* 都是这12个数字, 并且每行的列(span)的数字相加必须等于12 (或者等于该父级).

 
  
  1. ...
  • ...
  • 在这个例子, 我们用了 .span4 和 .span8, 一共是12列, 这就形成一个完整的行

    偏移是.offset*属性,指定单位偏移量 
     
    当需要嵌套时,在默认的网格系统里, 要实现嵌套可对已有的  .span* 内添加一个新的  .row 并加入  .span*. 嵌套在内的列数总和要等于父级列.,当然也可以不相同。
     
     
    2 流式网格系统
    流式网格的列宽使用百分比, 并不是具体像素值. 它对于固定的网格系统具有相同的应对能力, 关键是在不同屏幕分辨率和设备之间, 又可以以正确的比例显示
    只需要把.row 改成.row-fluid ,列的属性不变,同样偏移也是相同的,但是嵌套就有点不同
    嵌套在内的列数总和需要等于12. 这是因为流式网格是用百分比设置宽度, 并不是像素值.
     
    3 固定布局 container
    创建一个流式、两栏的布局, 只需要
    —这非常适合应用于程序和文档类的网站.(但是经过测试,如果分成两栏,但是内容还是会有重叠)
  •  
    4 响应式设计
    当然很多时候要检测用户使用的屏幕多大,这需要我们检测,使用响应式功能更为方便

    在你项目文件中的里, 添加一个如例子所示的meta标签和一个响应式样式表来开始使用响应式. 如果已经在自定义页面编译好一个Bootstrap, 那么只需添加一个meta标签.

     
      

    注意! Bootstrap在默认情况下是没有使用响应式功能的, 因为不是任何情况都需要使用到. 我们并不是让开发者移除此功能, 而是最好在需要使用的时候才使用它.

    二 基本css
    基础的css包括排版,代码输入,表格,表单,按钮,图像,最后还免费提供很多Glyphicons图标。
     
    1 排版
    bootstrap对标题h1-h6都进行了修改,还有全局默认的font-size,line-hegiht 以及段内的行间距。
    新定义了突出段落 .lead  ...

    强调 还有html5的  
    对齐 .text-left .text-center .text-right
    强调颜色 规范了五中颜色 text-warning text-error text-info text-sucess
    缩写很厉害啦,  利用title属性可以将缩写包围的字母显示全写,attr,以前都要用link实现的
    地址管理,
     让html更加语义化,毕竟html是超文本标记语言
    1. Twitter, Inc.
    2. 795 Folsom Ave, Suite 600
    3. San Francisco, CA 94107
    4. P: (123) 456-7890
    *css 层叠样式表 cascading style sheets
    引用
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    2. Someone famous Source Title
    列表没变 有序ol  无序 ul,当然还有很多添加的css, .unstyled 无样式, .inline-block水平排列,
     
    2 代码
    因为需要一些特殊标记,如<>,所以添加了
    For example, 
     should be wrapped as inline
     
    3 表格
    添加属性
    .table-striped在表格内部添加条样,间隔一个一个 .table-bordered(圆角) .table-hover在table内部使用停悬效果 .table-condensed 是得单元格padding减半,让表格更加紧凑
    同样还是四个颜色 .success  .error .warning .info
     
    4 表单
     Label nameExample block-level help text here.Check me out
     
      
    1. Legend
    2. Example block-level help text here.
    3.  Check me out
    4. Submit
    还有文本框、下拉菜单、按钮很多没说出来,自己看文档吧
     
    5 按钮
    btn btn-info btn-primary btn-success btn-warning btn-danger btn-inverse  btn-link 
     大小区别 btn-large btn-small btn-mini 
     
    6 图像
    改变展示样式
    7 图标

    所有图标都需要一个独特、前缀带 icon-属性的 标签. 如需使用时, 可直接将以下代码使用在任何地方:

     
      

    也可以使用风格相反(白色)的图标, 这里准备了一个额外的属性. 我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.

     
      

    注意! 当在旁边使用文本, 按钮或导航链接, 为了有一个适当的间距, 请一定要在后面留一个空格位置.

     
    三 组件
    组件有下拉菜单, 按钮组,按钮式下拉菜单,导航(这个使用很多),导航条,路径是导航,分页,标签和标记,排版,省略图,通知,进度条
     
    四 插件
    插件可以单独被添加(有些有可能需要依赖), 或一次性全部导入.  bootstrap.js 或  bootstrap.min.js 文件中, 包含了所有插件.
    很多js插件,我们可以用一下

    推荐阅读
    • HTML5网页模板怎么加百度统计?
      本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
    • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
    • Webpack5内置处理图片资源的配置方法
      本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
    • Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
    • 基于layUI的图片上传前预览功能的2种实现方式
      本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
    • CSS3选择器的使用方法详解,提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
    • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
      本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
    • 知识图谱——机器大脑中的知识库
      本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
    • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
    • Java验证码——kaptcha的使用配置及样式
      本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
    • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
    • Html5-Canvas实现简易的抽奖转盘效果
      本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
    • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
    • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
    author-avatar
    手机用户2502894273
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有