书籍- 响应式网页设计-Bootstrap开发速成(2)

Love The Way You Lie 2023-10-14 14:16 41阅读 0赞

# 响应式网页的布局方式 #

Grid System （网格系统）其实是一种平面设计方法与风格，借助固定的格子切割版面来  
设计布局  
![在这里插入图片描述][5f127d855e66437d9c5c8c6c08ef6dce.png]  
Grid System 会这么普遍的原因是它为我们提供了富有弹性且方便的网页排版及模块化  
方法，也为视觉设计师与网页工程师提供了共同沟通的“语言” 。  
网页的Grid System。Grid System 主要由栏（ column，或列）与间隙（阴阳r ）所组成，通过固定的格子切割版  
面来设计布局。简易来说，就是把一定宽度的页面切割成数栏或数列，网页上的每个元素区块  
则按所需的宽度栏数从上而下排版。图9-2 所示是有名的960 Grid，它把960px 宽的区块切  
成12 栏，在视觉设计与网页排版时就按所需的大小对齐栏线。  
![在这里插入图片描述][147b2997d7b249c8875aacdcc7b2292e.png]  
网页设计为何需要Grid System  
网页为何需要有Grid System 来辅助设计呢？其理由有三点：  
( 1 ）增加可读性。通过Grid System 进行布局可以建立对齐规律的排版。把运用在  
平面设计的对齐技巧运用于网页上，通过分栏拆出不同的区块来放置不同的内容，同时各  
个区块间仍然整齐排列。  
( 2 ）建立共同的语言基础。当设计师与工程师都共同使用Grid System 时， 在产品开  
发中可以从线框（ wireframe ）开始，视觉设计稿到最后网页css 都一脉相承，不需要转  
换任何比例尺寸，可以加快开发速度并降低页面设计与程序设计的沟通成本。  
(3 ）建立适应不同大小屏幕的布局。网页设计与平面设计最大的差别在于：网页的  
画布不是固定大小的： 平面设计常常有一个目标大小的版面，如实际印出的大小，设计师  
直接根据最后输出的大小在画布上挂行设计。网页设计时常会遇到用户屏幕大小不同的问  
题， 一个网页必须自己适应在不同的屏幕上显示，固定大小的设计并不适用于屏幕大小变  
化不一的网页。G rid System 提供了某种程度的比例概念，易让设计师实现响应式设计  
一一自适应设计。  
![在这里插入图片描述][6ead65cc0ca94b47bd1364fa1b8a23bd.png]  
布局规则  
Bootstrap 中的Grid System  
![在这里插入图片描述][ad1e2d2d7b44427a9ad10c8df97f3f24.png]  
![在这里插入图片描述][1a60f298a2e841ce99b65e1a59e5d9b9.png]

![在这里插入图片描述][b366b461feda4f8881ceac02045ac5af.png]  
![在这里插入图片描述][6e51d74f5dcb419f8e2ef15290cca91a.png]  
![在这里插入图片描述][19efc546266a4c77bef6c1060c56b0b8.png]  
![在这里插入图片描述][b043d28c2cf643e1beaf4f2530939d37.png]  
![在这里插入图片描述][ee28d1ee57494a0c9dd5c8d94c87b220.png]  
![在这里插入图片描述][88a098591b934b21a0067bd8567412a5.png]

# Bootstrap CSS 样式的使用 #

![在这里插入图片描述][17fb3900aa614f188a6912bfac45e9b9.png]  
![在这里插入图片描述][aa0be63d1ce24489ab88e3aa7bf48a5e.png]  
![在这里插入图片描述][aa12108c55eb47bb9af2bf05e94c8015.png]  
![在这里插入图片描述][62191163dfde4759a990641bad219d4e.png]  
![在这里插入图片描述][e6ce0b31c0d34b23b0d860cdbb5958bd.png]  
![在这里插入图片描述][c15589d8316046938acdd6344d65dffe.png]  
![在这里插入图片描述][aebf2919e15a44b19466e555fafccaea.png]  
![在这里插入图片描述][82c3f614eef04464aff16b5bafdfe3eb.png]  
![在这里插入图片描述][06abdf3df90642e6a2b12bb043784cbc.png]  
![在这里插入图片描述][a8ec8d0f8d114a60acadbe87fea534f0.png]  
![在这里插入图片描述][738bf246b9924d1fab840b0ca3c54919.png]  
![在这里插入图片描述][f1076e580f7242f0824af4e25e0b10eb.png]

# Bootstrap 市局组件的使用 #

## 字体图标 ##

![在这里插入图片描述][21dfbf13079f4293bb1667183db05606.png]  
![在这里插入图片描述][08d171dae0504af4a83eaf7e81b85fd2.png]

## 下拉式菜单 ##

![在这里插入图片描述][37aa98f9a0544abd8c037aa1e8fe9509.png]  
![在这里插入图片描述][13cae952eee3430a9eee16825be983d7.png]

## 按钮群组 ##

![在这里插入图片描述][6d9646db68bd4b79a604ca95f80c537b.png]  
![在这里插入图片描述][cacc982a8ec24fc18e730c2bdae7970a.png]

## 输入框群组 ##

![在这里插入图片描述][2f7201a2e4534066b5695692366ee568.png]

## 导航 ##

![在这里插入图片描述][5225cc0a849d4e66a62d6226da250fd6.png]  
![在这里插入图片描述][776e56bc306445a7ac5e5c8efa5c8886.png]  
![在这里插入图片描述][643ae659ac5d44f580a1f3819e06ea7f.png]  
![在这里插入图片描述][78e3af34142a40cfa950f1fa9b1c52c3.png]

## 导航栏 ##

![在这里插入图片描述][66cececab07543aab639e1782840af8c.png]  
![在这里插入图片描述][f1bd37f1b2264d2396e54a8afb3afc7b.png]  
![在这里插入图片描述][c36bed0c67b54ce894ae7a648ea23e4e.png]  
![在这里插入图片描述][e2fc468eb3894d55b0d020d90511ec7b.png]

## 分页 ##

![在这里插入图片描述][ac618790543e446a8812fa2225866d7f.png]  
![在这里插入图片描述][82ef4c83dbd74558966d7efe771139ff.png]

## 提示标志 ##

![在这里插入图片描述][3c1836637a604118a84687881d0301ac.png]

## 大屏幕效果 ##

![在这里插入图片描述][a1b691a5fc9d496d8d7620dfc465d34d.png]  
![在这里插入图片描述][77206ae975384d54a259ade86025783b.png]

## 缩略图 ##

![在这里插入图片描述][7715aa28d60044308c508e0cf6442eef.png]

## 进度条 ##

![在这里插入图片描述][6d3a39c4ea5745a2aec1cd91dfe26367.png]  
![在这里插入图片描述][2c47c648943c43e8be243583b6ecfecf.png]

## 面板 ##

![在这里插入图片描述][af2d5ed8bdc44037833c7f5789c02a98.png]

## 响应式嵌入内容 ##

![在这里插入图片描述][556ac1fe7ed84660b60845ac2b2ec3cc.png]

[5f127d855e66437d9c5c8c6c08ef6dce.png]: https://img-blog.csdnimg.cn/5f127d855e66437d9c5c8c6c08ef6dce.png
[147b2997d7b249c8875aacdcc7b2292e.png]: https://img-blog.csdnimg.cn/147b2997d7b249c8875aacdcc7b2292e.png
[6ead65cc0ca94b47bd1364fa1b8a23bd.png]: https://img-blog.csdnimg.cn/6ead65cc0ca94b47bd1364fa1b8a23bd.png
[ad1e2d2d7b44427a9ad10c8df97f3f24.png]: https://img-blog.csdnimg.cn/ad1e2d2d7b44427a9ad10c8df97f3f24.png
[1a60f298a2e841ce99b65e1a59e5d9b9.png]: https://img-blog.csdnimg.cn/1a60f298a2e841ce99b65e1a59e5d9b9.png
[b366b461feda4f8881ceac02045ac5af.png]: https://img-blog.csdnimg.cn/b366b461feda4f8881ceac02045ac5af.png
[6e51d74f5dcb419f8e2ef15290cca91a.png]: https://img-blog.csdnimg.cn/6e51d74f5dcb419f8e2ef15290cca91a.png
[19efc546266a4c77bef6c1060c56b0b8.png]: https://img-blog.csdnimg.cn/19efc546266a4c77bef6c1060c56b0b8.png
[b043d28c2cf643e1beaf4f2530939d37.png]: https://img-blog.csdnimg.cn/b043d28c2cf643e1beaf4f2530939d37.png
[ee28d1ee57494a0c9dd5c8d94c87b220.png]: https://img-blog.csdnimg.cn/ee28d1ee57494a0c9dd5c8d94c87b220.png
[88a098591b934b21a0067bd8567412a5.png]: https://img-blog.csdnimg.cn/88a098591b934b21a0067bd8567412a5.png
[17fb3900aa614f188a6912bfac45e9b9.png]: https://img-blog.csdnimg.cn/17fb3900aa614f188a6912bfac45e9b9.png
[aa0be63d1ce24489ab88e3aa7bf48a5e.png]: https://img-blog.csdnimg.cn/aa0be63d1ce24489ab88e3aa7bf48a5e.png
[aa12108c55eb47bb9af2bf05e94c8015.png]: https://img-blog.csdnimg.cn/aa12108c55eb47bb9af2bf05e94c8015.png
[62191163dfde4759a990641bad219d4e.png]: https://img-blog.csdnimg.cn/62191163dfde4759a990641bad219d4e.png
[e6ce0b31c0d34b23b0d860cdbb5958bd.png]: https://img-blog.csdnimg.cn/e6ce0b31c0d34b23b0d860cdbb5958bd.png
[c15589d8316046938acdd6344d65dffe.png]: https://img-blog.csdnimg.cn/c15589d8316046938acdd6344d65dffe.png
[aebf2919e15a44b19466e555fafccaea.png]: https://img-blog.csdnimg.cn/aebf2919e15a44b19466e555fafccaea.png
[82c3f614eef04464aff16b5bafdfe3eb.png]: https://img-blog.csdnimg.cn/82c3f614eef04464aff16b5bafdfe3eb.png
[06abdf3df90642e6a2b12bb043784cbc.png]: https://img-blog.csdnimg.cn/06abdf3df90642e6a2b12bb043784cbc.png
[a8ec8d0f8d114a60acadbe87fea534f0.png]: https://img-blog.csdnimg.cn/a8ec8d0f8d114a60acadbe87fea534f0.png
[738bf246b9924d1fab840b0ca3c54919.png]: https://img-blog.csdnimg.cn/738bf246b9924d1fab840b0ca3c54919.png
[f1076e580f7242f0824af4e25e0b10eb.png]: https://img-blog.csdnimg.cn/f1076e580f7242f0824af4e25e0b10eb.png
[21dfbf13079f4293bb1667183db05606.png]: https://img-blog.csdnimg.cn/21dfbf13079f4293bb1667183db05606.png
[08d171dae0504af4a83eaf7e81b85fd2.png]: https://img-blog.csdnimg.cn/08d171dae0504af4a83eaf7e81b85fd2.png
[37aa98f9a0544abd8c037aa1e8fe9509.png]: https://img-blog.csdnimg.cn/37aa98f9a0544abd8c037aa1e8fe9509.png
[13cae952eee3430a9eee16825be983d7.png]: https://img-blog.csdnimg.cn/13cae952eee3430a9eee16825be983d7.png
[6d9646db68bd4b79a604ca95f80c537b.png]: https://img-blog.csdnimg.cn/6d9646db68bd4b79a604ca95f80c537b.png
[cacc982a8ec24fc18e730c2bdae7970a.png]: https://img-blog.csdnimg.cn/cacc982a8ec24fc18e730c2bdae7970a.png
[2f7201a2e4534066b5695692366ee568.png]: https://img-blog.csdnimg.cn/2f7201a2e4534066b5695692366ee568.png
[5225cc0a849d4e66a62d6226da250fd6.png]: https://img-blog.csdnimg.cn/5225cc0a849d4e66a62d6226da250fd6.png
[776e56bc306445a7ac5e5c8efa5c8886.png]: https://img-blog.csdnimg.cn/776e56bc306445a7ac5e5c8efa5c8886.png
[643ae659ac5d44f580a1f3819e06ea7f.png]: https://img-blog.csdnimg.cn/643ae659ac5d44f580a1f3819e06ea7f.png
[78e3af34142a40cfa950f1fa9b1c52c3.png]: https://img-blog.csdnimg.cn/78e3af34142a40cfa950f1fa9b1c52c3.png
[66cececab07543aab639e1782840af8c.png]: https://img-blog.csdnimg.cn/66cececab07543aab639e1782840af8c.png
[f1bd37f1b2264d2396e54a8afb3afc7b.png]: https://img-blog.csdnimg.cn/f1bd37f1b2264d2396e54a8afb3afc7b.png
[c36bed0c67b54ce894ae7a648ea23e4e.png]: https://img-blog.csdnimg.cn/c36bed0c67b54ce894ae7a648ea23e4e.png
[e2fc468eb3894d55b0d020d90511ec7b.png]: https://img-blog.csdnimg.cn/e2fc468eb3894d55b0d020d90511ec7b.png
[ac618790543e446a8812fa2225866d7f.png]: https://img-blog.csdnimg.cn/ac618790543e446a8812fa2225866d7f.png
[82ef4c83dbd74558966d7efe771139ff.png]: https://img-blog.csdnimg.cn/82ef4c83dbd74558966d7efe771139ff.png
[3c1836637a604118a84687881d0301ac.png]: https://img-blog.csdnimg.cn/3c1836637a604118a84687881d0301ac.png
[a1b691a5fc9d496d8d7620dfc465d34d.png]: https://img-blog.csdnimg.cn/a1b691a5fc9d496d8d7620dfc465d34d.png
[77206ae975384d54a259ade86025783b.png]: https://img-blog.csdnimg.cn/77206ae975384d54a259ade86025783b.png
[7715aa28d60044308c508e0cf6442eef.png]: https://img-blog.csdnimg.cn/7715aa28d60044308c508e0cf6442eef.png
[6d3a39c4ea5745a2aec1cd91dfe26367.png]: https://img-blog.csdnimg.cn/6d3a39c4ea5745a2aec1cd91dfe26367.png
[2c47c648943c43e8be243583b6ecfecf.png]: https://img-blog.csdnimg.cn/2c47c648943c43e8be243583b6ecfecf.png
[af2d5ed8bdc44037833c7f5789c02a98.png]: https://img-blog.csdnimg.cn/af2d5ed8bdc44037833c7f5789c02a98.png
[556ac1fe7ed84660b60845ac2b2ec3cc.png]: https://img-blog.csdnimg.cn/556ac1fe7ed84660b60845ac2b2ec3cc.png