bootstrap 快速搭建页面 熟练

day50

昨日回顾

事件冒泡

组织后续事件发生
return false;
e.stopPropagation()

事件委托
$('父类').on(‘事件名称’,'子代选择器',function(){})
页面载入
$(document).ready(function(){})
$((function)(){})

each循环
li = [11,22,33]
$.each(li,function(k,v){})
$('.c1').each(function(k,v)(){})

data
$('div').data('key','value')
$('div').removeData('key')

今日内容

Bootstrap

快速开发框架   html css js 都封装好了
现在时,三个在一块 
CSS 把fonts 的东西都加载进入了  但是必须有那个文件夹 一块 ,相对引入

content = 'width=device-width,initial-scale=1' 按照设备等比缩放为 1 手机电脑适配 按照的是获取窗口大小的那个

栅格系统
0 auto 上下零边距 左右居中  
12 等份   中间两个  就是居中

container-fluid   设置了padding
虽然 100% 大小     但是两边有留白
布局:
cox-sizing:content-box   
            border-box   pading大了,content笑了,总大小是一定的

<div class="col-md-12">   // 12 块  6块在左边

媒体查询
捕获手机的宽度 设置不同的样式

media@().....
@media (min-width: @screen-sm-min) { ... }
响应式
针对不同的屏幕宽度,把网页做出不同的大小
这样就不换行了   col-md-6 换行
div class='col-md-6  col-sm-6 c1'   中等屏幕  小屏幕
或者   直接用    .col-xs-   自动调节大小(自动适配手机) 不换行
列嵌套
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9          // 文本内容
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
列偏移
col-md-4 col-md-offset-4     往右偏移4个
也是用margin做的,只不过封装好了
列排序
push-6   往右边走6个
pull-6   往左边走6个
h1 - h6 主题
b 的 p标签变大了
mark 标签自带高亮
strong  变粗
用bootstrap  给你封装了这些很多  可以查看
<p class='text-uppercase c1 c2 c3'>
基本缩略语
首字母缩略语
带下划线的文本<u>
斜体  <em> 

无序列表
list-inline
code 标签

用户输入kbd

校验状态 
has-error    红色警告
has-warning
图标
span class=''
比如 span(style = 'red'  'gly gly-ast')

控件尺寸
input 框变大变小
内在其实是给input框加高度

day51

昨日回顾

引入

bootstrap 引入

本地   link href ='bootstrap.min.css'
网络
js 前端加密   自动登陆好了   自动筛选车票  
预订车次加密了  号     反混淆  反爬虫   本来好爬  现在不好爬了  用到继承什么的去网上查  公司信息 比较重视的   一般的不用加密

基本模板

布局容器
div class = 'container' 两边有留白
div class = 'container-fluid'  布满整个窗口 宽度上 高度上一般不限定死的 网页内容多 就高
栅格系统
    class = 'row'  一行
    class = 'col-md-6'  占6列   <992时, 就用samll
又分了12列 
列排序
    超小屏幕的:col-xs-xx
    小屏幕的:col-sm-xx
    中屏幕的: col-md-
    大屏幕的:  col-lg-
列偏移
    class = 'col-md-6 offset 3'
    class = 'col-md-6 col-md-push-6'
拉回来
    class = 'col-md-6 col-md-pull-6'

列嵌套
div class=row
    div class='col-sm-9'    将上面的9列加载了12列
        div class='row'
            div class='col-xs-8-'
媒体查询
可以做响应式
表格

不想要了,自己设置覆盖他

table-striped  带条纹的
table class='table table-hover'  悬停有色
状态类
颜色:active  warnning  danger   info  successs   
表单
form 
提交
form-group  一组  has-success   都变成绿色
图标
ok  图标
feedback    反馈   ✔变色
不喜欢怎么办
自带的不好看,
怎么做,去网上搜各种
jQuery  滚轮插件  表格插件
专业的前端
他们的库很多
    别人的
    自己写好的,准备用的
    
搭建个页面分分钟的事,这是他们的基本功
iconfont
iconfont 比较强大 想要的图标都有 
class = 'iconfont icon'
fontawesome
split  
pulse   旋转
兼容性
iconfont 和 fontawesome 和 bootstrap  是相互兼容的
但是引用了多的话可能就不兼容了  如:fa  和别的fa 重了的话

组件

必须把css 和 js 文件都引入
bootstrap  以来jQuery  所以先引入jQ
分割线
drop 下拉
分割线: s
嵌套
href('#')
不刷新   JavaScript:void(0)
如果刷新就会没了 , 不利于调试
vue的弊端
路飞学城
专业的是怎样的操作
标签页
又称 导航  table    
京东栏  商品评价  
div在下面加文字图片就成
胶囊式的标签页
nav nav-pills   
标签页固定在顶端
nav-fixed-top  
nav-fixed-buttom  
active
class= 'active'  被选中了  灰色的北京颜色
啥是锚点
mysql
bin-log   记录日志 创建文件等等都备份 必须要写的 
solo-log   
监控慢日志  
读取慢日志的条数有多少条  
搞好关系 运维  dba  有些sql语句写出来很牛
巨幕
大背景  jumbotron
模态对话框
点击就能用
轮播图
设置图片宽度   img{ width:100%;}   宽度铺满
data-interval = '1000';   轮播时间间隔

js代码
S(''){

}
作业
添加  模态对话框
编辑还没做呢?
浮动 pull-right   


快速搭页面
搭页面

搜索 button 图标 操作

信息收集卡

搜索 button 图标 操作

搭页面

原文地址:https://www.cnblogs.com/Doner/p/10861570.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e