bootstrap-排版

1.标题和段落

标题：.page-header
段落：.lead

原来的样式：
这里写图片描述

排版后：
代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
    <div class="container">
        <h1 class="page-header">bootstap前端框架</h1>
        <p class="lead">在bootstrap官网下载最新的bootstrap文档，然后将相应的bootstrap文档导入要写的界面代码中
        在bootstrap官网下载最新的bootstrap文档，然后将相应的bootstrap文档导入要写的界面代码中
    在bootstrap官网下载最新的bootstrap文档，然后将相应的bootstrap文档导入要写的界面代码中
在bootstrap官网下载最新的bootstrap文档，然后将相应的bootstrap文档导入要写的界面代码中</p>
    </div>
</body>
</html>

这里写图片描述

2.字体

对字体进行操作

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
    <div class="container">
        <h1 class="page-header">bootstap前端框架</h1>
        <p class="lead">在
            <mark>bootstrap</mark>
            <del>官网下载最新的bootstrap文档</del>
            <small>然后将相应的</small>
            <div class="text-left">bootstrap文档导入要写的界面代码中</div> //左对齐
            <div class="text-right">bootstrap文档导入要写的界面代码中</div>//右对齐
            <div class="text-center">在bootstrap官网下载最新的bootstrap文档</div>//居中对齐
            <div class="jstify">在bootstrap官网下载最新的bootstrap文档</div>//两端对齐


            <div class="text-lowercase">Hello Lower SQO</div> 
            <div class="text-uppercase">hello UPper sql</div>   
            <div class="text-capitalize"> hello how are you</div>   

        </p>
    </div>
</body>
</html>

这里写图片描述

3.无样式列表

< ul > :  .list-unstyled

4.代码

<div class="container">
        <h1 class="page-header">bootstap前端框架</h1>
        <p class="lead">
            <pre>bootstrap</pre>
            <kbd>官网下载最新的bootstrap文档</kbd>
            <p><var>然后将相应的</var></p>        
        </p>
    </div>

这里写图片描述

5.表格

原始表格：
< th >列标题
< td >列

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
    <div class="container">
        <table>
            <tr>

                <th>1111</th>   
                <th>2222</th>   
                <th>3333</th>   
                <th>4444</th>               
                <th>5555</th>   
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>      
                <td>1</td>  
                <td>1</td>
                <td>1</td>  
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>      
                <td>1</td>  
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>      
                <td>1</td>  
                <td>1</td>
                <td>1</td>
            </tr>
        </table>
    </div>
</body>
</html>

这里写图片描述

.table : 变成表格；
这里写图片描述

.table-striped : 加阴影

这里写代码片

.table-bordered : 加边框

这里写图片描述
.table-hover可以使鼠标悬停的行的背景变为灰色。

行的可选类-五色
使用下列类可以使行的背景色变化，从而表达一定含义。
向< tr >添加
.success : 绿色
.active ：灰色
.warning：黄色
.info：蓝色
.danger：红色

总表格：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
    <div class="container">
<div class="page-header">table</div>
        <table class="table table-striped  table-bordered table-hover">
            <tr class="active">

                <th>1111</th>   
                <th>2222</th>   
                <th>3333</th>   
                <th>4444</th>               
                <th>5555</th>   
            </tr>
            <tr class="danger">
                <td>1</td>
                <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>
                <td>1</td>
            </tr>
            <tr class="warning">
                <td>1</td>
                <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>
                <td>1</td>
            </tr>
        </table>
    </div>
</body>
</html>

这里写图片描述

响应式表格：
当表格缩小到一定程度时，不再缩小，出现滚动条，通过滑动查看表格
.table-responsive: 放在浮层div里，子元素里面放表格

按钮

<body>

<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接</button>
<!-- jQuery (对Bootstrap的 JavaScript插件来说是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件(如下),或者根据需要包括单个文件 -->
<script src="bootstrap/v3/dist/js/bootstrap.min.js"></script>

</body>

这里写图片描述

块级按钮： btn-block :独占一行
按钮属性:disabled 按钮不可用

五种可以做按钮的元素：
< button >
< a>
< input type=”button” >
< input type=”submit” >
< input type=”reset” >

1.标题和段落

2.字体

3.无样式列表

4.代码

5.表格

按钮

猜你喜欢