BootStrap的基本使用

什么是bootstrap？

bootstrap是一个快速开发web应用程序和网站的前端框架，，bootstrap是基于HTML CSS JavaScript

bootsctrap的历史

bootstrap是由Twitter的Mark Otto和 Jacob Thomton开发的bootstrap是2011年八月在github上发布的开源产品

为什么使用bootstrap？

移动设备优先，所有的主流浏览器支持，容易上手，响应式设计

它为开发人员创建接口提供了一个简洁统一的解决方案

它包含了功能强大的内置组件，易于定制

它是开源的

bootstrap包的内容

基本结构

bootstrap提供了一个带有网络系统，链接样式，背景的基本结构，这将在bootsrap基本结构部分详细讲解

css：boorstrap自带一下特性全局的css设置，定义基本的html元素样式，可扩展的class，以及一个先进的网络系统。

组件：bootstrap包含了十几个可重用的组件，用于创建图像，下拉菜单，导航，警告框

javascript插件，bootstrap包含了十几个自定义的jquery插件，您可以直接包含所以的插件，也可以逐个包含这些插件

定制：你可以定制bootstrap的组件，less变量和jquery插件得到您自己的版本？

bootstrap就是一个前端开发框架，提供了优雅的HTML和CSS规范，它是由动态css语言less写成

其实就是便于人们开发较为精美的前端样式，写好的样式，直接调用即可

BootStrap下载地址

官方地址：http://getbootstrap.com

中文地址：http://bootcss.com    

 在引用前需要引入jquery                                                                                 

     

bootstrap插件依赖Bootstrap.js

Bootstrap.js基于jquery

bootstrap中的排版——对齐

由于bootstrap是用外部的css，大部分是通过类修饰标签的形式

.text-left

.text-center

.text-right

bootstrap中的排版——大小写

.text-lowercase

.text-uppercase

.text-capitalize

bootstrap中的排版——表格

1. 带边框的表格  .table-bordered
2. 条纹状表格    .table-strped
3. 悬停变色      .table-hover
4. 紧凑风格      .table-condensed

bootstrap中的排版——按钮

bootstrap给HTML大部分表单设置了默认样式，我们可以给表单添加相应的类名，以实现变淡的水平排列，个性化定制等

<button class="btn btn-default">这是一个标准按钮样式</button>

<button class="btn btn-success">这是一个原始按钮样式</button>

<button class="btn btn-info">这是一个用于要弹出信息的按钮</button>

<button class="btn btn-warning">这是一个需要谨慎操作的按钮</button>

<button class="btn btn-danger">这是一个危险动作的按钮</button>

按钮大小

<button class="btn btn-default btn-lg">这是一个调整大小的按钮</button>

按钮全屏

<button class="btn btn-info btn-block">这是一个设置全屏的按钮</button>

禁用按钮

<button class="btn btn-warning disabled="disabled">这是一个被禁用的按钮</button>

bootstrap中的排版——图片

图片-形状

    圆角 img-rounded

    圆形 img-circle

    带有边框圆角图形 img-thumbnail

其余辅助类

文本颜色，背景颜色

状态设置，三角符号

栅格布局：

1. <style>
2.      *{
3.             padding:0;
4.             margin:0;
5.       }
6.       @media screen and (min-width:*px) and (max-width:*px){
7.       }
8. </style>

<div class="test col-lg-3 col-md-6 col-sm-3 col-xs-12"></div>

bootstrap组件-下拉菜单

①dropdown控制组件为下拉

②dropdown-menu-dight代替pull-right右对齐

③divider 分割线

data-toggle="dropdown"   为绑定事件

在input前加个$

1. <div class="input-group">
            <span class="input-group-addon">$<span>
            <input type="text" class="form-control:">
</div>

form-control:百分百宽度

bootstrap组件——导航

以一个带有class.nav的无序列表开始

nav-tabs代表可切换的导航

nav-pills代表胶囊导航

nav-justified使导航垂直

<ul class="nav nav-tabs">

    <li class="active"><a href="www.baidu.com">百度</a></li>

    <li><a href="google.com">谷歌</a></li>

    <li><a href="cxgzs.xyz">失效</a></li>

</ul>

bootstrap组件——分页

pagination在父元素中添加标识分页

page放置在翻页区域

revious把链接向左对齐 next把链接向右对齐

<div class="pagination">

    <ul>

        <li><a href="#">Prev</a></li>

        <li class="active">

            <a href="#">1</a>

        </li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">Next</a></li>

    </ul>

</div>

bootstrap组件——进度条

①progress表示进度条

②通过状态类修改进度条的颜色

③progress-bar-striped使得进度条渐变

botstrap组件——列表

list-group代表表组

②badge代表状态组

③active代表选中状态

<ul class="list-group">

    <li class="list-group-item active">

        这是一个列表

        <span class="badge">

            14

        </span>

    </li>

    

    <li class="list-group-item disable">

        这是一个列表

        <span class="badge">

            14

        </span>

    </li>

    

    <li class="list-group-item">

        这是一个列表

        <span class="badge">

            14

        </span>

    </li>

</ul>

bootstrap组件——面板

①panel代表面板

②panel-body党代表面板内容

③panel-footer代表面板的注释