作者: 糖心m | 来源:发表于2017-07-03 22:22 被阅读31次

    bootstrop总结上

    一、 什么是Bootstrap?

     Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。 Bootstrap 是基于 HTML、CSS、JavaScript的,它在jQuery的基础上进行了更为个性化和人性化的完善, 形成一套自己独有的网站风格,并兼容大部分jQuery插件。

    二、Bootstrap的优势:      Bootstrap简洁灵活,使得 Web 开发更加快捷。  其最大的优势是响应式布局,使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。

    三、Bootstrap的使用方法   

     1. 在项目页面中引入            jquery.3.1.1.js          bootstrap.min.js 文件          bootstrap.min.css 文件   

     2.特别注意:文件的引用顺序,            query.3.1.1.js 要放到最上面,其次再引入另外两个文件   

     3.在制作HTML页面的时候就可以直接引用了!

    四、全局样式  (一)bootstrap全局显示、排版和链接    

    1、全局显示    Bootstrap 3使用 body {margin: 0;} 来移除 body 的边距。

    2、排版  使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

    3、链接样式:                  通过属性 @link-color 设置全局链接的颜色。      容器container        Bootstrap 3 的 container class 用于包裹页面上的内容。        Bootstrap对排版、代码的增强功能    标题: Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式  

    1、内联子标题或者class="small"  

     2、段落  为了给段落添加强调文本,则可以添加 class=“lead”,这将得到更大更粗 、行高更高的文本(二)文本对齐风格以及特殊处理:  1.强调  HTML 的默认强调标签(设置文本为父文本大小的 85%)、(设置文本为更粗的文本)、(设置文本为斜体)。

      2.缩写  HTML元素提供了用于缩写的标记,比如 WWW 或 HTTP。  Bootstrap 定义元素的样式为显示在文本底部的一条虚线边框,  当鼠标悬停在上面时会显示完整的文本(只要您为title 属性添加了文本)。  为了得到一个更小字体的文本,只要把 .initialism 到就可以了。  

    3.地址(Address):  使用

    标签,您可以在网页上显示联系信息。  由于

    默认为 display:block;,您需要使用 �标签来为封闭的地址文本添加换行。    列表:  Bootstrap 支持有序列表、无序列表和定义列表。      有序列表:有序列表是指以数字或其他有序字符开头的列表。      无序列表: 可以使用 class .list-unstyled 来移除样式(开头的数字)。也可以通过使用 class .list-inline 把所有的列表项放在同一行中。      定义列表:可以使用 class dl-horizontal 把

    行中的属于与描述并排显示。表格 

     1. 基本的表格        class="table" 只带有内边距(padding)和水平分割的基本表  

    2.可选的表格类  (条纹表格)  通过添加 class="table table-striped",将在  内的行上看到条纹  (边框表格)  通过添加 class="table table-bordered",将在  内的行上看到边框  (精简表格)  通过添加 class="table table-condensed",实现精简表格  (上下文类表格)  上下文类允许改变表格行或单个单元格的背景颜色  值:  

     .active 对某一特定的行或单元格应用悬停颜色 

     .success 表示一个成功的或积极的动作    

      .warning  表示一个需要注意的警告    

      .danger  表示一个危险的或潜在的负面动作  这些类可被应用到 、 或 。

        (三)代码的增强功能        Bootstrap 允许您以两种方式显示代码       

     第一种是标签,内联显示代码        第二种是

    标签。如果代码需要被显示为一个独立的块元素或者代码有多行,则应该使用

    标签。注意:使用

    和标签时,确保开始和结束标签使用了 unicode 变体: < 和 >。    (四)Bootstrap对表单的增强功能      表单    表单布局:Bootstrap 提供了下列类型的表单布局:        1、垂直表单(默认)  向父元素

    添加 role="form"。          把标签和控件放在一个带有 class .form-group 的

    中。这是获取最佳间距所必需的。          向所有的文本元素、和 添加 class ="form-control"。

    2、内联表单

    如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,

    向 标签添加 class="form-inline"。

    3、水平表单

    水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。

    如需创建一个水平布局的表单,请按下面的几个步骤进行:

    向父元素 添加 class .form-horizontal。

    把标签和控件放在一个带有 class .form-group 的

    中。

    向标签添加 class .control-label。

    注意:

    默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。

    在使用内联表单时,需要在表单控件上设置一个宽度。使用 class .sr-only,您可以隐藏内联表单的标签。

    相关文章

      网友评论

          本文标题:

          本文链接:https://www.haomeiwen.com/subject/vfozcxtx.html