css--Bootstrap框架

一、使用Bootstrap来完成一个上中下左中右的页面布局

示例：

     //设置提供一个让网页居中的容器
     <div class="container">
    //设置行，宽度固定
       <div class="row">
　　　//网页头部
           <div class="col-lg-12 header"> </div>
       </div>
        <div class="row">
 　　　　　　　//网页中间部分
            <div class="col-lg-3 left"></div>
            <div class="col-lg-6 center"></div>
            <div class="col-lg-3 right"></div>
        </div>
        <div class="row">
　　　　　　　　//网页尾部
            <div class="col-lg-12 footer"></div>
        </div>
    </div>

1、需引入的文件

<link rel="stylesheet" type="text/css" href="public/css/bootstrap.css">

 

2、Bootstrap栅格系统 
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局   
四种栅格选项          
（1）xs(超小屏幕)  
（2）sm(小屏幕)  
（3）md(中屏幕)   
（4）lg(大屏幕) 

二、表单

示例：

<form role="form">
 　　　　　　//把这个div里面的内容封装成一个组，有Bootstrap框架来设置样式 
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入你的email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

 

1、
    <form class="form-inline" role="form">
这是内联表单   
2、
    <form class="form-horizontal" role="form">
这是水平排列表单 

三、按钮
示例：  

    <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-primary btn-lg">主要</button>
    <button type="button" class="btn btn-success">成功</button>
    <button type="button" class="btn btn-info btn-sm">信息</button>
    <button type="button" class="btn btn-warning btn-xs">警告</button>

1、class="btn btn-default、class="btn btn-primary、class="btn btn-success、btn btn-info设置按钮的不同风格   

2、btn-lg大按钮 ---标准按钮----btn-sm小按钮----btn-xs小按钮；设置按钮大小

四、图片

示例：

<img src="img/jay.jpg" class="img-circle">——用于构建圆形的图片
    <img src="img/jay.jpg" class="img-thumbnail">——用于添加简单的边框
    <img src="img/1.jpg" class="img-rounded">——用于构建圆角的图片

1、Bootstrap对图片做了默认样式处理；主要包括圆角，原型，简介边框