Bootstrap
Bootstrap
喵俺第一专栏
共同学习,共同进步,提高编程技能。另外,有好多优秀的项目练手哦,详细看第一个专栏,里面有很多可作为课设、毕业的项目,希望自己可以帮助到你哦!
展开
-
Bootstrap-jqgrid学习(十六)
表格属性 分页属性:显示总条数 每页显示多少条:定义下拉列表,展示每页显示条数: 列排序:给表格定义标题: 定义是否隐藏表格的下拉按钮: 自适应父容器: 指定表格的高度:设置页面初始的页码: 指定分页栏的位置:是否显示翻页按钮: 是否展示跳转页面输入框: listpage.json:原创 2022-12-06 23:14:06 · 828 阅读 · 0 评论 -
Bootstrap-jqgrid学习(十五)
通过复制bootstrap代码进行开发,代码非常多,其实bootstrap重点在于它的表格,以后作为管理系统而言,都是对数据完成基本的功能,CRUD做分页,查询,修改,自己去做的话代价很大,bootstrap只是做了样式的美化,没有给我们提供更加丰富的功能帮助我们处理增删改查在企业用bootstrap做页面时,为了近一个步增加开发效率,引用一个 jquery的插件叫:jqgrid:数据表格,下面的都不需要我们自己手写了,交给插件,包括分页,查询增删改查等这些javascript代码,我们只关心后台的数据交互原创 2022-12-05 23:52:55 · 841 阅读 · 0 评论 -
Bootstrap主页面搭建(十四)
创建主页面:index.jsp:引入bootstrap依赖:首先写导航条,复制代码更改:使用栅格布局: 菜单栏使用手风琴组件,复制代码:修改手风琴代码:手风琴嵌套列表组 用户管理页面跟主页面,导航栏,菜单栏都相同,不同的是页面中心内容部分,所以复制index主页面代码,修改页面中心内容部分的代码: 添加分页、消息提示警告框: 第二个面板: 点击修改:用户列表页list.html面详细代码: 页面联合搭建: 下面分被创建分模块:主页面引用:分别复制list1,l原创 2022-12-04 22:46:13 · 1691 阅读 · 0 评论 -
Bootstrap登录页面制作(十三)
创建web项目 引入bootstrap: 创建login页面引入bootstrap:刷新页面F12在NetWork查看是否引入成功: 修改表单: 全部登录代码:原创 2022-12-03 22:23:15 · 1631 阅读 · 0 评论 -
Bootstrap页面整合(十二)
首先引入bootstrap: 复制导航条代码:修改导航条: 删除 改完的导航条: 使用列表组或者手风琴来实现左侧菜单:复制手风琴代码首先使用栅格布局2分写菜单,10写主要内容 把手风琴的代码复制到2分的div内:就出现手风琴效果 手风琴里嵌套列表组:修改代码: 带上 in默认展开的:去掉in 在10分的中心内容做一个标签页: 修改代码: 在中心内容添加分页: 给添加按钮添加弹出的模态框: js:点击添加用户按钮: 给删除按钮添加模态框:首先复制一份模态框:原创 2022-12-03 11:43:12 · 1330 阅读 · 0 评论 -
Bootstrap学习(十一)
事件用在: show 我们希望在模态框完全展示之后发起一个ajax请求,去查询某个数据,比如添加的时候有一个分类,这个分类来自后台,在模态框完全展示之后发一个异步请求,把异步请求的结果渲染到分类列表。呈现动态的标签页选项卡需要加data-toggle属性,并把选项卡a连接与面选项卡面板联系起来,href对应下面选项卡面板的id。fade显示时的渐变动画可加可不加,role是屏幕辅助设备用的 aria-lable屏幕辅助设备用的。关闭按钮因为有:data-dismiss属性,可以关闭模态框。原创 2022-12-02 11:40:27 · 679 阅读 · 0 评论 -
Bootstrap学习(十)
把文字放在一个div里面,容器有边框。原创 2022-12-02 09:24:47 · 149 阅读 · 0 评论 -
Bootstrap学习(九)
还可以使用按钮构建列表组。原创 2022-11-30 10:43:08 · 140 阅读 · 0 评论 -
bootstrap学习(八)
利用栅格:公12分,让他偏移2分,占8分 container本身就是留白的,如果你想变大一点使用container-fluid。巨幕就是加一个灰色的背景然后加一些,关键的内容,在没有灵感的地方加一个巨幕,来填充屏幕。大尺寸加:pagination-lg。会显示一条灰色的线:据上边有边距。还可以在胶囊式标签显示徽章。原创 2022-11-30 09:56:54 · 171 阅读 · 0 评论 -
bootstrap标签和导航条件组件学习(七)
这里的标签是不能切换的,它是静态的,在JavaScrapt插件里面是是可以切换页面的。表单:直接复制表单代码放到对应的div里面-放其他组件的div。直接复制表单代码放到对应的div里面-放其他组件的div。当下拉页面的时候, 把导航条固定在低部。发现先放的是按钮,但是展示的时候先展示文本。button可有可无,它是使屏幕自适应的。class 是active是使导航条选中。当下拉页面的时候, 把导航条固定在顶部。一往下滚动,导航条就滚走了。通过ul来设置显示顺序。就变成了黑色的导航条。原创 2022-11-29 22:42:11 · 499 阅读 · 0 评论 -
bootstrap学习(六)
单按钮下拉菜单把class的dropdown换成btn-group。嵌套下拉菜单需要把dropdown 换为btn-group。把input放在一起,是用来美化输入框的。原创 2022-11-28 22:37:24 · 145 阅读 · 0 评论 -
bootstrap下拉菜单学习(五)
写下拉按钮:class命名样式 当点击按钮触发下拉菜单需要加data-toggle。图标不仅可以直接放文本里面, 还可有结合按钮去用。下拉菜单 class:用dropdown-menu。首先写一个div class:dropdown。bootstrap字体图标和下拉菜单组件的使用。查看是否引入成功:200位成功。原创 2022-11-28 10:32:42 · 579 阅读 · 0 评论 -
bootstrap学习(四)
静态控件用在修改页面的id属性,只让用户看到不让他修改:还可以用readOnly。添加一个P标签:添加calss属性,但是p标签不能提交数据,可以设置一个隐藏标签。如果想要再一行展示则需要加: calss:form-inline。默认按钮尺寸可以不加,它是自动显示默认尺寸。bootstrap中图片、按钮、表单。加btn-block:class。水平表单:水平排列分行显示。原创 2022-11-26 22:49:57 · 860 阅读 · 0 评论 -
bootstrap表格学习(三)
在外部加一个class:table-responsive:给它加一个更好的响应式支持。鼠标点上去变色:灰色。原创 2022-11-26 21:06:27 · 349 阅读 · 0 评论 -
bootstrap学习(二)
sm忽略超小屏幕 sm包含小屏、中等屏幕、大屏幕 如果你想要网页兼容所有屏幕这里就用xs。xm 无论屏幕多小,它都是水平排列的,sm当屏幕很小时堆排列在一起,当大于阈值才水平排列。当此时的屏幕是大屏幕,容器默认显示1170px。原创 2022-11-21 23:34:09 · 150 阅读 · 0 评论 -
bootstrap学习(一)
创建boot文件夹方置bootstrap所需要的文件目录,拷贝过来。标题:在没有引入bootstrap时的样式。整个body里面的内容都叫做页面主体。(1)bootstrap第一个程序。(1)bootstrap第一个程序。获得更好的响应式支持引入meta。原创 2022-11-21 22:35:10 · 363 阅读 · 0 评论 -
Bootstrap实例(四)
在div中加属性:data-interval="1000" 修改轮播速度。标签的aria-controls 跟内容的a标签的href是相对应的。data-wrap="true":当轮播玩重新开始。当鼠标移上不停止:默认是鼠标移动上去会停止。修改标签内容:data- 都是跟js相关的。修改img的样式、附加轮廓div:的样式。点击JavaScript组件。点击JavaScra组件。选择Carousel。原创 2022-11-21 18:36:03 · 1301 阅读 · 0 评论 -
Bootstrap(三)
创建html页面,把上面模板代码复制进去:加代码这是移动端需要添加的。visible-xs:隐藏显示,当屏幕宽度小于等于xs的时候显示、visible-sm:隐藏显示,当屏幕宽度小于等于ms的时候显示、hidden-xs:当屏幕达到指定的宽度隐藏起来。它是一个流体容器,去掉:fluid。点击组件,选择导航条。原创 2022-11-20 18:26:46 · 782 阅读 · 0 评论 -
Bootstrap-栅格实例(二)
yann移动到第一个:class样式添加: col-md-pull-8 据right 往左移动2个位置 8(2*4) 个单位。webpack的calss添加:col-sm-push-6 此时缩小到sm 据left 往右移动1个位置 12/2=6。react的class添加:col-sm-pull-6 此时缩小到sm 据right 往左移动1个位置 6个单位。第二个跟第三个换一换:第二个class添加:col-lg-push-3 据左边移动3个单位,往右移一个位置。原创 2022-11-20 16:57:03 · 849 阅读 · 0 评论 -
Bootstrap(一)
去掉fluid,这个是一个固定容器,没有占满整个屏幕:当屏幕大小变化时里面的div宽度会随之进行相应的变化按照下面的数据变化:它有阈值。bootstrap-3.3.7、bootstrap-3.3.7-dist 是原码文件,带dist是编译完的,里面的css是经过压缩的。没有宽度,是100%占整个屏幕,它是一个流体容器是一个流体布局,拉缩它会自动缩小。两边是有padding的:没有宽度是100%,它是一个流体容器是一个流体布局。创建:第二个html:02_流体容器.html。(2)栅格源码分析(忽略)原创 2022-11-20 14:59:05 · 1227 阅读 · 0 评论