bootstrap1总结

Posted 2022-11-07 qijiang123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>