首页 > 其他分享> > day48总结

day48总结

2019-12-01 23:52:02 作者：互联网

Bootstrap简介
页面布局
文本样式
- 文本样式
表格样式
js插件
表单样式
- 示例: 校验用户名是否存在
组件
- 字体图标
- 导航
- 按钮组
- 巨幕
- 面板
- 图片
- 背景色
图书管理系统页面搭建

Bootstrap简介

响应式布局: 能根据浏览器屏幕大小动态布局
安装:
1. 官网下载bootstrap3.3.7
2. css文件夹留一个bootstrap.min.css
3. fonts文件夹不动
4. js文件夹留一个bootstrap.min.js
bootstrap框架是基于jQuery的, 所以用框架动态效果的时候, 必须先导入jQuery
需要导入的文件: 1. jQuery, 2. css文件, 3. js文件
bootstrap学习内容: css样式, 组件, js插件

页面布局

Normalize.css

保证浏览器对样式的渲染是一致的

布局容器

使用前端框架之后, 所有的标签样式的调整, 全部是通过class属性值来的
<div class="container"></div>, 左右两边留白
<div class="container-fluid"></div>, 全屏显示

栅格系统

默认情况下, 每行会均分成12分, 可以通过col-md-Num来选择想要占几份
注意已经占了几分, 还剩几分, 和需为12份
栅格参数: xs, 超小屏幕; sm,小屏幕; md, 中等屏幕; lg, 大屏幕
代码: <div class="container"><div class="row">...</div></div>
列偏移: <div class="col-md-6 c1 col-md-offset-3"></div>, 往右边偏移3

列嵌套, 通过row来划分

    <style>
        .c1 {
            background-color: red;
            height: 50px;
            border: 2px solid black;
        }
    </style>

<div class = "container">
    <div class = "row c1">
        <div class = "col-md-3 c1"></div>
        <div class = "col-md-9 c1"></div>

        <div class = "col-sm-3 c1"></div>  <!--响应式布局-->
        <div class = "col-sm-9 c1"></div> 

    </div>
</div>

媒体查询

响应式布局内部原理, 屏幕宽度小于500px, 更换c1样式

    <style>       
        @media screen and (max-width: 500px){
            .c1 {
                background-color: yellow;
                height: 50px;
                border: 2px dashed purple;
            }
        }
    </style>

文本样式

<h1>python脱产12期 <small>是最牛逼的</small></h1>, small标签内容为副标题

<p class="lead">python脱产12期</p>, lead标签为段落内容突出显示

<p class="lead">python脱产<mark>12期</mark></p>, mark标签为文本高亮显示

<em>python脱产12期</em>, 斜体

<p class = "text-center">python脱产12期</p>, 文本对齐

<abbr title="一种编程语言">python</abbr>, 缩略语

<address>123@qq.com</address>, 邮箱

<!--引用-->
<blockquote>
  <p>人生无处不青山</p>
  <footer class="blockquote-reverse">maozedong<cite title="Source Title">主席诗文集</cite></footer>
</blockquote>

<code>print('hello world')</code>, 单行代码

<pre><p>Sample text here...</p></pre>, 多行代码

表格样式

table-hover: 表格中的每一行对鼠标悬停状态作出响应

table-striped: 表格条纹

table-bordered: 表格边框

class="success": 设置行或单元格颜色

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">  <!--占8份然后居中-->
            <h2 class="text-center">数据展示</h2>
            <table class="table table-hover table-striped table-bordered">
                <thead>
                <tr class="success">
                    <th>用户名</th>
                    <th>密码</th>
                    <th>爱好</th>
                </tr>
                </thead>

                <tbody>
                <tr class="info">
                    <td>jason</td>
                    <td>123</td>
                    <td>学习</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

js插件

模态框

滚动监听

标签页

表单样式

表单添加加样式: form-control

form-group: 在块级标签中添加, 增大与下个的间隙

form-inline: 内联样式, 输入框在一行

clearfix: 清除浮动带来的影响

placeholder: 文本留白

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">注册页面</h2>
            <form action="" class = "form-inline">
                username: <input type="text" class="form-control">
                password: <input type="text" class="form-control">
                <p class="form-group"><input type="submit" class="btn btn-success"></p>
                <p><a href="#" class="btn btn-success btn-lg">点我有你好看</a></p>
            </form>
        </div>
    </div>
</div>

示例: 校验用户名是否存在

pull-right: 向右浮动

class = "has-error": 错误信息校验状态

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">注册页面</h2>
            <form action="">
                <div class="form-group">
                    username: <input type="text" class="form-control" id="d2">
                    <span style="color: red" class="pull-right"></span>
                    <br>
                    <input type="button" class="btn btn-success pull-right" value="注册" id="d1">
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $('#d1').on(
        'click', function () {
            var userVal = $('#d2').val();
            if (userVal.length == 0) {
                $(this).parent().addClass('has-error').children().eq(1).text('用户名不能为空!')
            }
        }
    );


    $('#d2').on(
        'focus', function () {
            $(this).next().text('').parent().removeClass('has-error')
        }
    )
</script>

组件

字体图标

可以将图标当做文本处理

<span class="glyphicon glyphicon-user"></span>

图标库: Font Awesome-->下载font-awesome-4.7.0-->link引入...min.css-->英文搜索

按钮组

颜色: btn-颜色

尺寸: btn-尺寸; btn-block, 宽度拉伸至父标签100%

巨幕

面板

图片

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

背景色

<p class = "bg-danger">123</p>

!important: 执行优先级最高, 高于行内样式

图书管理系统页面搭建

<!--导航条开始-->
<nav class="navbar navbar-inverse"...></nav>
<!--导航条结束-->

<div class="container">
    <div class="row">
        <div class="col-md-3">
           <!--列表组开始-->
            <div class="list-group">
            </div>
            <!--列表组结束-->
        </div>
        
        <div class="col-md-9">
            <!--面板开始-->
            <div class="panel panel-default">
                <!--分页开始-->
                <div class="text-center">
                    <nav aria-label="Page navigation">
                    </nav>
                </div>
                <!--分页结束-->
            </div>
            <!--面板结束-->
        </div>
    </div>
</div>

标签：总结,12,样式,标签,js,python,day48,css
来源： https://www.cnblogs.com/-406454833/p/11968427.html