Bootstrap初学基础总结 - 杨先森的博客

时间:2024-03-03 22:28:03

Bootstrap初学基础总结

Bootstrap 

 

1>.Web UI 框架
可以帮助菜鸟程序员 ,迅速简便的搭建起专业级界面效果

2>如何快速掌握利用框架
1.框架的整合和搭建,让框架能够正常跑起来
2.通过复制粘贴文档中的代码,实验框架中的各个组件 记住关键组件的图像 (长什么样)

 

3>Bootstrap需要导入的文件

   1.head标签中,通过link导入bootstrap.css样式表(核心文件,必须导入)

   2.如果使用bootstrap的交互功能和插件需要导入

       A) jquery.js

       B) bootstrap.js

 

 

4>Bootstrap 容器

 .container   宽度是“固定”(不同浏览器窗口宽度对应不同的尺寸)居中

 .container-fluid  100%  两侧有边距

  如果没有特殊情况,所有内容都应该放在容器中

 

5>导航条  navbar  

1.两种配色

default(浅色系)  navbar navbar-default

 

inverse(深色系) navbar navbar-inverse

 

 

2.行为  

A.默认(圆角,随页面滚动)

B.固定(直角,100%,可以固定在顶部或底部)navbar navbar-default navbar-fixed-top/bottom   C.静态(直角,100%,随页面滚动) navbar navbar-default navbar-static-top

 

 

 3.手机模式

会将导航条上的人内容隐藏起来,同时在右侧出现一个按钮(汉堡图标)

   通过按钮控制隐藏内容的显示

 

6>表格 table

  1.形态

      默认:只有表格行下横线,表头文字加粗

 

    

  交替:.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

 

   

   边框添加 .table-bordered 类为表格和其中的每个单元格增加边框,同时有竖线

 

    

  紧凑:通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半

 


悬停:通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

 

响应式表格(手机模式):将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

 

7>按钮 btn

   颜色

 

<button type="button" class="btn btn-default">(默认样式)白色Default  </button>

<button type="button" class="btn btn-primary">(首选项)深蓝Primary   </button>

<button type="button" class="btn btn-success">(成功)绿色Success       </button>

<button type="button" class="btn btn-info">(一般信息)浅蓝Info        </button>

<button type="button" class="btn btn-warning">(警告)橙色Warning    </button>

<button type="button" class="btn btn-danger">(危险)红色Danger      </button>

<button type="button" class="btn btn-link">(链接)白色Link             </button>

 

尺寸(主要是高度和文字大小)

  大号:btn-lg

  默认

  小号:btn-sm

  超小:btn-xs

 

 

形态

   默认:鼠标指向会变色

   按下:向下凹陷

 

   禁用:不会变色,鼠标指针会变成禁止图片,颜色发白, <button> 元素添加 disabled 属性,使其表现出禁用状态。

 

手机默认

    通过btn-block将按钮设置为宽度撑满容器100%

     

8>表单

结构

  <form>

     .form-group

          <label>

             .form-control

 



形态

  默认:上下结构,form-group及其内部的labelform-control都是上下排列

 

 


  水平表单form-group仍然是上下排列,但其内部的labelform-control是左右排列的

 

  

行内表单:左右结构,from-group及其内部全部左右排列

 

 

 导航条内表单:专门在导航条中使用

 

Bootstrap的单选框和复选框

 

   形态

      垂直排列:

         Div.checkbox

             Label

                 Input[type=checkbox]

 

 



水平排列:

 


表单的3种状态 
1.焦点状态我们将某些表单控件的默认 outline 样式移除,然后对 :focus 状态赋予 box-shadow 属性。

 

2.禁用状态为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed鼠标状态。

 


3.只读状态为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。

 

 

表单控件的装饰

     第一种:添加帮助文档

 

     第二种:左侧addon

     第三种:右侧加图标(通常用来做输入验证)

 

 

分页  pagination

   方形,有上一页,下一页,还有页码

 

 

翻页   pager

圆角,没有页码!可以水平居中或两端对齐

 

 

面板   .pannel

           .pannel-heading

           .pannel-body

        圆角矩形区域,可以带标题栏,也可以不带

 

 

 

 

 

 

图标

Bootstrap自带图标,比较少

推荐使用font-awesome图标

    (需要cssfonts这两个文件夹,同时在页面上导入font-awesome.css

<i class =”glyphicon glyphicon-图标名”>

<i class =”fa fa-图标名

 

 

嵌套使用

  <a class=”btn btn-success”>

    <i class=”fa fa-图标名”>按钮

</a>

   <a class=”btn btn-success  fa fa-search”>按钮</a>

 

插件的使用规律

     1.必须导入jquery.jsBootstrap.js这个js脚本,否则 不能正常工作

     2.插件可以通过html属性实现基本功能(如:打开、关闭,此时不需要写js代码)

     3.如果想实现更多的控制,就需要写js

 

模态框

     1.通过HTML属性控制模态框打开和关闭的重要属性

        A.打开按钮上的2

               data-toggle=”modal”

               data-target=”样式类或样式id”指定要打开的模态框

 

        B.关闭:

            在模态框内部的任意按钮或标签上

              data-dismiss=”modal” 会关闭当前所在的模态框

     2.通过JavaScript调用,控制模态框的打开和关闭

        使用$()找到模态框,然后调用modal()方法

           传入文档中指明的参数即可

        只需一行 JavaScript 代码,即可通过元素的 id myModal 调用模态框:

      $(\'#myModal\').modal(\'show\')     //打开

       $(\'#myModal\').modal(\'hide\')     //隐藏

 

 

      3.模态框的基本样式

          .modol

              .modol-dialog

                   .modal-content

                       .modal-header

                       .modal-body

                       .modal-footer

 

下拉菜单

 

       结构

           .dropdown

              .btn     按钮

                  .caret  下拉按钮图标

                ul.dropdown-menu

基本不需要js控制

 

选项卡

  结构:

ul.nav.nav-tabs

       li.active(激活)>a[href=#id][data-toggle=tab]

 

.tab-content

      .tab-pane[id]

 

 

 

工具提示

   Tooltip/Popover弹出提示


 

 

 

因为性能原因默认没有激活,需要在页面底部加上相应方法调用初始化一下

       

Bootstrap布局特性-栅格系统

1.容器.container被栅格系统平分成12份(12列)

2.通过col-lg/md/sm/xs-11-12表示标签所占的份数

3.如果col-*-x中的x之和超过12则超过的标签换行

 

注意:

lg:表示宽屏桌面显示尺寸 >=1200px

md:方屏显示器的宽度  >=992px

sm:平板                >=768px

xs:手机               <768px

如果浏览器尺寸比col-[*]-1大,则指定的列有效

如果浏览器尺寸比col-[*]-1小,则指定的列无效,变成100%

 

4.container这个容器左右各有15pxpadding

    如果发现因为这15pxpadding导致不能对齐

    则在.container中添加.row来抵消15px

<div class="row"></div>

 

列的位置

    可以通过  col-*-pull-1  往左边拉

    可以通过  col-*-push-1 往右边推

    只在列有效时起作用!

 

   列的再拆分--列嵌套

        col-*-1中使用.row作为容器,可以再次拆分,使用.container不行!

 

更多源代码实例和样式详解课访问Bootstrap中文网,网址:http://www.bootcss.com/