前台技术学习8

Bootstrap是一套现成的css样式集合，用于开发响应式布局、移动设备优先的web项目。使用BootStrap需要导入 

<link rel="stylesheet" type="text/css" href="../BootStrap/bootstrap/css/bootstrap.min.css">
布局容器
    1、.container类用于固定宽度并支持响应式布局容器
    2、.container-fluid类用于全屏，占据全部视口
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  天下熙熙，皆为利来；
</div>

<div class="container-fluid">
  天下攘攘，皆为利往。
</div>
</body>
</html>


栅格网格系统
    1、Bootstrap将容器划分为十二等分，必须使用css
      xs(xsmall phones)超小屏  sm(small tablets)小屏  md(middle desktops)中屏  lg(large desktops)大屏
      在row中可以添加列(.column)，赋予合适的对齐方式和内距
    2、列组合
       更改数字合并列，类似于表格的colspan属性，列的总数不能超过12
    3、列偏移
       在class属性中加入col-md-offset-数字（<=12）
    4、列排序
       改变列的方向，改变左右浮动，设置浮动的距离
        col-md-push-num向后浮动（右）
        col-md-pull-num向前浮动（左）
    5、列嵌套
        在一个row中在嵌套一个row




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格网格</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-4" style="background: #00FFFF">4列</div>
        <div class="col-lg-8" style="background: #eb7350">8列</div>
    </div>
    <div class="row">
        <div class="col-lg-6" style="background: #ffff00">4列</div>
        <div class="col-lg-6" style="background: #afd9ee">8列</div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-1" style="background: #00FFFF">4</div>
        <div class="col-lg-1 col-md-offset-1"style="background: #eb7350">8</div>
        <div class="col-lg-1" style="background: #00FFFF">4</div>
        <div class="col-lg-1" style="background: #eb7350">8</div>
    </div>
    <div class="row">
        <div class="col-lg-1 col-md-push-5" style="background: green">4</div>
        <div class="col-lg-1" style="background: red">8</div>
        <div class="col-lg-1" style="background: black">4</div>
        <div class="col-lg-1" style="background: yellow">8</div>
    </div>

    <div class="row">
        <div class="col-lg-6" style="background: #ffff00">4
            <div class="row">
                <div class="col-md-9" style="background: #8D8D8D">9</div>
            </div>
        </div>
        <div class="col-lg-6" style="background: #afd9ee">8</div>
    </div>
</div>
</body>
</html>






常用样式
    1、标题
        BootStrap对h1~h6进行了覆盖，提供了.h1~.h6代替，可以展示出标题效果，small标签或.small可以定义副标题
    2、段落
        通过.lead突出强调内容（z增大文本、加粗、对行高和margin也做处理）
        small：小号字  b/strong：加粗文本  i/em斜体
    3、强调（颜色不同）
        .text-muted：提示
        .text-primary：主要信息
        .text-success：成功信息
        .text-info：通知信息
        .text-warning：警告信息
        .text-danger：危险信号
     4、对齐效果
        .text-left：左对齐
        .text-right：右对齐
        .text-center：居中对齐
        .text-justify：两端对齐




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <h1>标题一<samll>副标题1</samll></h1>
    <h2>标题二<span class="small">副标题二</span></h2>
    <h3>标题三</h3>
    <div class="h2">你好</div>
    <hr>
    <p>突出强调内容</p>
    <p class="lead">突出强调内容</p>
    <hr>
    <div class="text-muted">提示信息</div>
    <div class="text-primary">主要内容</div>
    <div class="text-success">成功</div>
    <div class="text-info">通知信息</div>
    <div class="text-warning">警告信息</div>
    <div class="text-danger">危险信息</div>
    <hr>
    <p class="text-left">左对齐</p>
    <p class="text-right">右对齐</p>
    <p class="text-center">居中对齐</p>
    <p class="text-justify">两端对齐</p>
</body>
</html>






列表
    1、定义列表
        <dl>
            <dt></dt>标题
            <dd></dd>内容
        </dl>
     去点列表： list-unstyled  内联列表：list-inline 将垂直形式变为水平形式




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <ul class="list-unstyled">
        <li>无序列表1</li>
        <li>无序列表2</li>
    </ul>
    <ol class="list-inline">
        <li>有序列表1</li>
        <li>有序列表2</li>
    </ol>
    <dl>
        <dt>标题1</dt>
        <dd>定义列表1</dd>
        <dt>标题2</dt>
        <dd>定义列表2</dd>
    </dl>
</body>
</html>






代码
    1、<code></code>在页面显示代码，单行内联
    2、<pre></pre>多行块代码,里面代码会跟着源码偏移 pre-scrollable下拉框
    3、<kbd></kbd>快捷键效果


表格
    .table-striped：斑马线
    .table-bordered：有边框
    .table-hover：鼠标移动高亮
    .table-condensed：紧凑型
    .active：将悬停颜色应用在行或单元格上
    .success：成功
    .warning：警告
    .info：信息变化
    .danger：危险




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
today is cold;<br>
<code>today is cold;</code>
<kbd>ctrl</kbd>+<kbd>s</kbd>保存
<pre>
    public class Main{
        public static void main(String[] args){
            System.out.println("hello world");
        }
    }
</pre>
<!--下拉框-->
<pre class="pre-scrollable">
    <ol>
    <li>......</li>
    <li>......</li>
    <li>......</li>
    <li>......</li>
    <li>......</li>
    <li>......</li>
    </ol>
</pre>
<hr>
<table class="table table-striped table-hover">
    <tr>
        <th>《完美世界》</th>
        <th>辰东</th>
        <th>30，0</th>
    </tr>
    <tr>
        <th>《斗破苍穹》</th>
        <th>天蚕土豆</th>
        <th>30.2</th>
    </tr>
    <tr>
        <th>《诛仙》</th>
        <th>萧鼎</th>
        <th>40</th>
    </tr>
    <tr>
        <th>《牧神记》</th>
        <th>宅猪</th>
        <th>32.0</th>
    </tr>
</table>
</body>
</html>






表单
    1、表单控件
        .form-control  .input-lg(较大)  .input-sm(较小),multiple可以设置多选
    2、选框
        复选框  垂直显示 .checkbox   水平显示  .checkbox-inline
        单选框  垂直显示 .radio      水平显示  .radio-inline
    3、按钮
        按钮禁用：①在标签中添加disabled属性
        ②在元素标签中添加类名disabled
        注：在class属性中添加disabled属性只是模式上禁用了，实际上能点




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<input type="text"><br>
<select>
    <option>---请选择城市---</option>
    <option>上海</option>
    <option>北京</option>
</select><br>
<textarea></textarea>
<hr>
<div class="row">
    <div class="col-lg-3">
        <input type="text" class="form-control"><br>
        <input type="text" class="form-control input-lg"><br>
        <input type="text" class="form-control input-sm"><br>
    </div><br>
    <div class="col-lg-3">
        <select class="form-control" multiple="multiple">
            <option>---请选择城市---</option>
            <option>上海</option>
            <option>北京</option>
        </select>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-lg-3">
        <div class="checkbox">
            <label><input type="checkbox">游戏</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">美女</label>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-lg-3">
        <div class="checkbox-inline">
            <label><input type="checkbox">游戏</label>
        </div>
        <div class="checkbox-inline">
            <label><input type="checkbox">美女</label>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-lg-3">
        <div class="radio">
            <label><input type="radio">游戏</label>
        </div>
        <div class="radio">
            <label><input type="radio">美女</label>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-3">
        <div class="radio-inline">
            <label><input type="radio">游戏</label>
        </div>
        <div class="radio-inline">
            <label><input type="radio">美女</label>
        </div>
    </div>
</div>
<!--按钮-->
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-sm">按钮</button>
<button class="btn btn-lg">按钮</button>
<button class="btn" disabled="disabled">按钮一</button>
<button class="btn disabled">按钮一</button>
</body>
</html>






表单布局
    步骤①向父标签<form>添加 role="form"
    ②把所有标签和控件放在一个带有.form-group中
    ③向所有文本元素添加class属性 form-control
    水平表单 form-horizontal
    内联表单 form-inline




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单布局</title>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<form action="#" class="form-horizontal" role="form">
  <div class="form-group">
    <label for="uname" class="control-label col-md-2">姓名</label>
    <div class="col-md-8">
      <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
    </div>
  </div>
    <div class="form-group">
        <label class="control-label col-md-2">爱好</label>
        <div class="col-md-8">
            <label class="checkbox-inline"><input type="checkbox">美女</label>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2">城市</label>
        <div class="col-md-8">
            <select class="form-control">
                <option>上海</option>
                <option>北京</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="remark" class="control-label col-md-2">简介</label>
        <div class="col-md-8">
            <textarea id="remark" class="form-control"></textarea>
        </div>
    </div>
</form>
<hr>
<!--内联表单-->
<form class="form-inline" action="#" role="form">
    <div class="form-group">
        <label for="username">姓名</label>
        <input type="text" id="username" class="form-control" placeholder="请输入姓名">
    </div>
</form>
</body>
</html>




缩略图和面板




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缩略图</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../img/xk2.jfif" alt="星空">
                <h3>银河</h3>
                <p>这是一张网图</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart">喜欢</span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil">评论</span>
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        星空合集
    </div>
    <div class="panel-body">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../img/xk2.jfif" alt="星空">
                <h3>银河</h3>
                <p>这是一张网图</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart">喜欢</span>
                </button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil">评论</span>
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>




明天将会开始学习后台技术


 






	
posted on 
2022-01-10 19:24 
跨越&尘世 
阅读(60) 
评论(0) 
编辑 
收藏 
举报












    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    











	
		

			

			
                
                    

			

                    

	





	Powered by: 博客园
	Copyright © 2024 跨越&尘世

Powered by .NET 9.0 on Kubernetes