th div样式控制_bootstrap学习心得总结-css样式设计分享

最新推荐文章于 2022-07-10 18:28:12 发布
最新推荐文章于 2022-07-10 18:28:12 发布
阅读量330 收藏
点赞数
文章标签： th div样式控制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39645003/article/details/111360958
版权

由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，但涉及到的东西还是很多，想要熟练掌握它，还是要多练练。

一：bootstrap是什么？

bs是什么? 即前端页面搭建的标准化框架工具，已经写好了css.js样式，只需要拿来用即可。

怎么用bs呢？主要是通过使用不同的类增加效果，每一种类，对应的功能不同。

bs好处：增加了开发效率，页面设计更加美观,支持响应式开发。

二：css样式设计

1：基于Html文档

bootstrap引用了部分html元素，所以头部需写成下面所示的样列。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html> ---包含HTML5文档声明，所有浏览器均开启标准模式
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！确保支持响应式布局 -->
  8. <title>Bootstrap</title>
  9. <!-- 新 Bootstrap 核心 CSS 文件 -->
  10. <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  11. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  12. <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  13. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  14. <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  15. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  16. <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  17. </head>
  18. <body>
  19. <h1>Hello, world!</h1>
  20. </body>
  21. </html>

2：栅格系统布局

通过设置行和列来进行内容的布局。bootstrap把页面设置为12列。通过改变列的数字来进行布局，比如设置三个等宽的列：

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  8. <title></title>
  9. <link href="css/bootstrap.css" rel="stylesheet">
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  11. <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  12. <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  13. </head>
  14. <body>
  15. <!-- 设置栅栏式布局-->
  16. <div class="container"><!--或者container-fluid-->
  17. <div class="row"> -- col-xs-4 : 指小于768px的小设备
  18. <div class="col-xs-4">11</div> -- col-sm-4 ：指>=768px的设备
  19. <div class="col-xs-4">22</div> -- col-md-4 ：指>=992px设备
  20. <div class="col-xs-4">33</div> -- col-lg-4 ：值1200px设备
  21. </div>
  22. <div class="row">
  23. <div class="col-md-4">11</div>
  24. <div class="col-md-4">22</div>
  25. <div class="col-md-4">33</div>
  26. </div>
  27. <div class="row">
  28. <div class="col-sm-4">11</div>
  29. <div class="col-sm-4">22</div>
  30. <div class="col-sm-4">33</div>
  31. </div>
  32. <div class="row">
  33. <div class="col-lg-4">11</div>
  34. <div class="col-lg-4">22</div>
  35. <div class="col-lg-4">33</div>
  36. </div>
  37. </div>
  38. </body>
  39. </html>

css网格式有四种写法，主要应用于不同设备的分辨率。

2：平移列

使用offset来进行平移。即平移的列数

XML/HTML Code复制内容到剪贴板

  1. <div class="container"><!--或者container-fluid-->
  2. <div class="row">
  3. <div class="col-xs-4">11</div>
  4. <div class="col-xs-4">22</div>
  5. <div class="col-xs-offset-2 col-xs-4">33</div>---指33向右平移了两列
  6. </div>
  7. <div class="row">
  8. <div class="col-md-4">11</div>
  9. <div class="col-md-4 col-md-offset-2">22</div>
  10. <div class="col-md-4">33</div>
  11. </div>
  12. <div class="row">
  13. <div class="col-md-4">11</div>
  14. <div class="col-md-4 col-md-offset-2">22</div>
  15. <div class="col-md-4">33</div>
  16. </div>
  17. </div>
  18. <!-- 平移列-->

效果如下：

79725e9830433348fd94ba1068c02282.png

33由于平移了两列，不能满足它占4列的要求，于是被挤到下一行开始占据4列。简单来说，相当于将整个div块右移。

3590e502e69e9f9ea45023850960a6c5.png

3：嵌套列

即在网格列里面再嵌套列。我们对比来看。

XML/HTML Code复制内容到剪贴板

  1. <div class="container"><!--或者container-fluid-->
  2. <div class="row">
  3. <div class="col-xs-8">
  4. <div class="col-xs-2">11</div>
  5. <div class="col-xs-4">22</div>
  6. <div class="col-xs-2">33</div>
  7. </div>
  8. </div>
  9. <div class="row">
  10. <div class="col-xs-8">11</div>
  11. </div>
  12. <div class="row">
  13. <div class="col-xs-4">11</div>
  14. <div class="col-xs-4">22</div>
  15. <div class="col-xs-4">33</div>
  16. </div>
  17. </div>

效果如下：

1f52dd89614312828a3cd901828667e5.png


有没有发现问题？为什么上面的没有平均分配8？
原因：我们来看下调试控制台
发现padding-left 和padding-right均为15px,这是因为，列与列之间存在padding值得影响，那为什么第二个div没有影响呢？我们来探究一下栅栏格的原理。
1：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2：通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding
也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
注意：此时row已经把列的padding给抵消了，所以，没有出现padding的值情况。4：列排序
主要是使用col-xs-push-* col-xs-pull-*(*表示0-11的数字)如何理解这两个类呢？push表示推，pull表示拉。XML/HTML Code复制内容到剪贴板

  1. <div class="row">
  2. <div class="col-xs-4">21</div>
  3. <div class="col-xs-8">24</div>
  4. </div>
  5. <div class="row">
  6. <div class="col-xs-4 col-xs-push-8">21</div>
  7. <div class="col-xs-4 col-xs-pull-4">24</div>
  8. </div>


效果图如下：

e3ee0fb54f5d264953e7e214f617ac04.png

<div class="col-xs-4 col-xs-push-8">21</div>---记为div1
<div class="col-xs-8 col-xs-pull-4">24</div>---记为div2 即可理解为交换两者位置，需要将div1向右推8列，div2需要向左拉4列。三：流式网格布局
1：列宽使用百分比，而不是像素
2：将row类换成row-fluid
3:其它基本功能与上面的固定布局一样，支持响应式。
4：平分某一个列时，由于流式布局采用的是百分比，所以应该按照6来计算。XML/HTML Code复制内容到剪贴板

  1. //注意下面这种情况，平分8列时，并不是设置它为两个4，而是两个6，因为bootstrap中是12列栅格分布。
  2. <div class="row">
  3. <div class="col-xs-8">
  4. <div class="col-xs-6">2</div>
  5. <div class="col-xs-6">2</div>
  6. </div>
  7. </div>

四：响应式设计
简单来说就是支持不同设备（手机，PC）的分辨率(960PX,1366PX,978PX等等)进行自适应响应。XML/HTML Code复制内容到剪贴板

  1. <div class="row">
  2. <div class="col-xs-6 col-md-12">21</div>
  3. <div class="col-xs-6 col-md-12">24</div>
  4. </div>


当设备小于768px时，效果如下：

cb3a40490b65ab31fe75bab890cda0bf.png

当设备>=992px时。效果如下：

7dafd53948f1bf0387db7307d0820991.png

上面两种类，分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。

以上这篇bootstrap学习心得总结-css样式设计分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

本文来源:

bootstrap学习心得总结-css样式设计分享--网页制作-脚本之家​www.xccinema.net
d605b4b89954f3003bdb7b8e2e9b463a.png

c

weixin_39645003
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootStrap学习心得
天空飘来五个字
08-04 5994
一、BootStrap介绍：   1. BootStrap特点：   1）跨设备、跨浏览器   可以兼容所有现代浏览器，包括比较诟病的IE7、IE8.   2）响应式布局   不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。   3）提供全面的组件   BootStrap提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开
分享bootstrap学习笔记心得(组件及其属性)
11-29
Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。 Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多jQuery插件：莫泰局昂、标签页、滚动条、弹出框等。 有关bootstrap的下载和文档可到bootstrap中文网：www.bootcss.com查看。 那么使用bootstrap的优势在哪里？第一、利于开发响应式网站，解决不同设备的兼容性问题
温故而知新——学习Bootstrap的一点经验
qq_64133626的博客
07-04 1160
1、首先，作为Bootstrap的初学者，在开始使用它之前，必需先了解Bootstrap及其工作方式；了解如何将其导入书面代码中以及如何构建Bootstrap项目。在开始编写之前，需要研究其相关代码。Bootstrap文档的所有信息都可以在相关网站上找到：2、其次，掌握HTML5、CSS3和JavaScript的相关知识，并安装最新版本的Bootstrap。3、然后，掌握Bootstrap的重点就是尽可能多地练习使用它。尝试构建一个实际的网站并一边学习一边参阅参考指南来测试该框架。4、另外，插件是网站设计的
【Bootstrap-学习小结】
橙子的博客
07-10 972
简介：是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性， 拥有样式库、组件和插件。常用来开发响应式布局（1）基本结构：栅格系统 （2）丰富的css样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式。 （3）布局组件：有丰富的组件库 （4）插件：基于jQuery的插件，功能强大。（1）浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。 （2）浏览器内核主要包括Blink、WebKit和Trident等。 （3）PC端的浏览器主要包括Google
学习关于Bootstrap的感悟和体会
action_xing的博客
08-23 7205
前言： 这是这两天他的学习关于Bootstrap的感悟和体会Bootstrap是一个非常受欢迎的前端开发框架，该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装，使开发人员可以轻松使用。 使用Bootstrap可以快速制作精美的响应式页面，并且兼容移动端Boostrap是最近几天学的一个新的开发框架，和之前学过的AUI框架来
bootstrap集成table样式的总结
05-25
Bootstrap是世界上最受欢迎的前端开发框架之一，它提供了一套完整的响应式布局、移动设备优先的Web设计工具。在Bootstrap中，Table组件是一个重要的部分，它允许开发者轻松地创建美观、可定制的表格。本篇文章将深入...
Bootstrap Table使用心得总结
09-01
8. **自定义样式**：为了适应不同的设计风格，可以通过修改CSS来调整表格的外观，如改变单元格的背景色、字体大小等。 9. **国际化**：通过引入`bootstrap-table-locale-all.js`，Bootstrap Table可以支持多种语言...
Bootstrap 实现表格样式、表单布局的实例代码
12-11
总之，Bootstrap 通过其丰富的预定义样式和组件，大大简化了网页开发中的表格和表单设计工作。开发者可以根据需求选择合适的样式类和布局模式，快速构建出美观且功能齐全的网页。在实际应用中，还需要注意引入...
添加easy-ui样式的style样式和具体的jsp页面示例
04-07
Easy-UI是由中国的开发团队设计的一套前端框架，它借鉴了Bootstrap的设计理念，但更加注重简洁和易用性。Easy-UI包含了诸如表格、下拉菜单、按钮、弹出窗口等常见的Web组件，通过引入CSS和JavaScript文件，开发者...
使用Bootstrap + Vue.js实现添加删除数据示例
12-09
Bootstrap是一个流行的前端开发框架，它提供了丰富的UI组件和响应式设计，而Vue.js则是一个轻量级的JavaScript库，用于构建用户界面。 首先，为了在页面中使用Bootstrap的样式和功能，我们需要引入以下外部资源： ...
bootstrap学习心得总结-css样式设计分享
09-22
下面小编就为大家带来一篇bootstrap学习心得总结-css样式设计分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
bootstrap 期末项目 设计报告 模板
07-18
bootstrap 期末项目 设计报告 模板
Bootstrap CSS 概览
Hi_Panda
08-08 879
移动设备优先 这可能是 Bootstrap 3 的最显著的变化。在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，以便与主 CSS 一起让项目对移动设备友好。现在不一样了，Bootstrap 3 默认的 CSS 本身就是对移动设备友好的。 Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在
Bootstrap学习心得——前端学习阶段性总结（非知识性）
m0_46544453的博客
10-20 2434
在学习完HTML,CSS,JS,jQuery后，我花了两天进行了bootstrap的学习。主要就是结合文档进行一些视觉和使用方式的修改，用的主要还是前面三个的东西，这让我在实现一些东西的时候更省时间了。 在学习前面三个东西的时候我就在想，可不可以通过搞一些属于自己的通用的小东西来节省写页面的时间（那时只是听说过框架，在学jQuery时是第一次接触框架这个东西，但jQuery并没有给我焕然一新简单的感觉）。在了解完bootstrap后，这个框架给我了强烈的冲击：之前要写个把小时的东西现在从文档复制然后改几.
bootstrap学习心得
想要全栈chris的博客
11-28 1530
Bootstrap栅格系统1.简介 响应式设计 栅格实现原理： 1）一行row必须在.container中 2）使用行 在水平方向创建列组 3）具体内容应放置在column内 4）内置像.row和 .col-xs-4(占4列) 媒体查询： 主要用到min-width ，max-width，and语法，用于在不同分辨率下设置不同的css样式。@me
bootstrap的使用心得
weixin_33701294的博客
04-16 136
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷——百度百科 这段时间一直在负责团队项目中的前端编写工作，在这期间对Bootstrap使用很有感触。因为我以前从来没有做过前端，只会一点点HTML的基础，对于CSS是一窍不通，所以 写起网页来是相当吃力，往往一个简单的...
bootstrap学习总结分享
liujing_555的博客
07-29 7125
最近项目开发需要bootstrap于是自学了一波，现在来和大家分享一下。一. 一些组件插件的使用及注意点1、 Bootstrap是移动设备优先的 让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下：<meta name="viewport" content="width=device-width,
Bootstrap学习心得
wsy_2979的博客
12-11 2178
Bootstrap简介        Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Les...
Bootstrap使用心得
laurel_y的博客
08-08 681
最近忙于工作好久没写博客了，今天更新一波，顺便记录一下工作中遇到的疑惑。      关于bootatrap， 其实我并没有系统的学习过，也就是说我只是在原生 html+css 的基础之上，用了一些bootstrap 的样式类及插件，例如 多选下拉列表、时间控件 等。但是因此我也遇到了一些问题，比如说浏览器兼容性问题、比如说设备自适应问题。      （1）浏览器兼容性问题：由于bootstra
bootstraptable 日期控件_bootstrap table插件使用说明demo
最新发布
06-03
Bootstrap Table 是一个基于 Bootstrap 的可扩展的表格插件，支持多种功能扩展、多种数据源以及自定义格式化等。如果要在 Bootstrap Table 中使用日期控件，可以使用 Bootstrap Datepicker 插件。 下面是一个使用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值