bootstrap1总结

bootstrap中的排版----标题：

标题（h1~h6/.h1~.h6）

副标题（small）

h1:36px

h2:30px

h3:24px

h4:18px

h5:14px

h6:12px

排版---文本：

p标签：默认14px，行高20px;段落的底部外边距设置了10px；

排版-----对齐

.text-left,.text-right,text-center

排版-----大小写

.text-loweercase：这个是让网页中的大写变成小写。

.text-uppercase ：所有小写变大写

.text-capitalize： 首字母大写其余都小写。

代码的应用：

mark:是文本的后边的样式，它有一个颜色的底边。

del删除文本的样式

ins/u:是插入文本，就是下划线。

small：文本变小。

strong ：加粗。

排版-------表格：

带边框的表格：.table-bordered

条纹状的表格：.table-striped

悬停变色:.table-hover

紧凑风格：table-condensed

<table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题一</th>
                <th>标题一</th>
                <th>标题一</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
            <tr class="active">
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
            <tr class="success">
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
            <tr class="info">
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
            <tr class="waring">
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
            <tr class="danger">
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
        </tbody>
    </table>
</tr>

排版-------表单：

<form class="form-inline">
    <div class="form-group"> 
        <label class="sr-only" for="">这是一个输入框</label>
        <input type="text" class="form-control input-lg input-sm input-" placeholder="这是一个输入框">
       
    </div>
    <div class="form-group has-success" > 
            <label class="" for="">这是一个输入框</label>
            <select name="" id="" class="form-control">
                    <option value="">北京</option>
                    <option value="">北京</option>
                    <option value="">北京</option>
                    <option value="">北京</option>
                    
            </select>
        </div>
    <div class="form-group has-waring"> 
        <label class="control-lable" for="">这是一个输入框</label>
       <textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
    </div>
</form>

排版-------表单（二）：

 <button class="btn btn-default btn-lg">按钮</button>
 <button class="btn btn-success btn-sm">按钮</button>
 <button class="btn btn-primary btn-block">按钮</button>
 <button class="btn btn-info" disabled="disabled">按钮</button>
 <button class="btn btn-warning">按钮</button>
 <button class="btn btn-danger">按钮</button>
 <button class="btn btn-link">按钮</button>
 <a class="btn btn-danger" href="" >22222</a>

图片的-------形状

圆角：.img-rounded

圆角：.img-cricle

带有边框的圆角圆形：.img-thumbnail

辅助类：

文本颜色，背景颜色，状态设置，三角符号

viewport：

meta标签中的viewport：

1.width，height

2.user-scalsble,initial-scale

3.maximum-scale,minimun-scale

 

响应式开发：栅格

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

 

重点

单位：

px：常用

em：适用于手机端

rem：会继承父元素的大小。

字体图标：

体积小便于加载：

无需重复设计：

方便引用：

bootstrap：同时也提供了一些图标库，Glyphicons,下面是图标的引用

下拉菜单：

 

转载于:https://www.cnblogs.com/qijiang123/p/11536028.html