如题所述
ä¸é¢æå¨è¿éç®åçä»ç»ä¸Bootstrapæ¡æ¶ã
ããBootstrapæ¡æ¶å±äºUIæ¡æ¶ï¼è¿ä¸ªåjQueryä¸å¤ªä¸æ ·ï¼å ¶å®åç¡®çæè¿°Bootstrapæ¡æ¶å±äºcssæ¡æ¶èéjavascriptæ¡æ¶ï¼ä½æ¯å®æ¬èº«ä¹ä½¿ç¨javascriptæ¥å®åBootstrapæ¡æ¶çè§è§ææãæ¤å¤ï¼Bootstrapæ¡æ¶ååè¶ åï¼å¨æ¯æhtml5åcss3çæµè§å¨ä¸è¡¨ç°ç¹å«å¥½ï¼èä¸å¯¹ç§»å¨ç»ç«¯çæµè§å¨æ¯æä¹æ¯ç¸å½ä¼ç§ã
ããä¸ä¸ªå®æ´çBootstrapæ¡æ¶å å«å¦ä¸å个é¨åï¼
èææ¶ï¼ä¸ç¥éå®ç½ä¸ºå¥è¿ä¹ç¿»è¯ï¼ï¼ç¨äºéç½®èæ¯ãé¾æ¥æ ·å¼ãæ æ ¼ç³»ç»çï¼å¹¶å å«ä¸¤ä¸ªç®åçå¸å±ç»æãBootstrapçæ ·å¼ä½¿ç¨äºlesscssææ¯ï¼æ¯å¦éç½®èæ¯è¿æ ·çæä½ï¼è¿äºæ¯è¾ç®åæå°±ä¸å±å¼åè¿°äºï¼èææ¶éæåºå½©çæ¯æ æ ¼ç³»ç»åå¸å±ãæ æ ¼ç³»ç»æ¯å°é¡µé¢å®½åº¦åæ12åï¼æ æ ¼ç³»ç»å为两ç§ç±»åï¼ä¸ç§æ¯é»è®¤æ æ ¼ç³»ç»ï¼è¿æ¶åæ æ ¼ç³»ç»æ¯æ940pxåç´ è¿è¡çåï¼æ们å¯ä»¥ä½¿ç¨span1ï¼span4è¿æ ·çclasså±æ§æä½é»è®¤æ æ ¼å¸å±ï¼å¦ä¸ç§æ¯æµå¼æ æ ¼ç³»ç»ï¼è¿ä¸ªæ¶åååç宽度就ä¸æ¯åºå®ï¼èæ¯æ ¹æ®ä½ å¯è§é¡µé¢è¿è¡12çåï¼åæ ·å¯ä»¥ä½¿ç¨span1ï¼span4æä½æµå¼æ æ ¼ãè¿ä¸ªç³»ç»é常ä¹å¥½ï¼åcssæé¾çå°±æ¯divå¸å±ï¼ä½¿ç¨æ æ ¼ç³»ç»å¯ä»¥å¤§å¤§ç®ådivçå¸å±æä½ãå¦å¤ä¸ä¸ªå°±æ¯åå¸å±æä½äºï¼å¸å±ä¹å为åºå®åæµå¼ï¼è®©ä¸å¤ªç²¾écsså¸å±ä¹è½è½»æ¾æä½å¸å±ã
åºæ¬çcssæ ·å¼ãBootstrapç»åºäºä¸æ ·å¸¸ç¨çHTMLå ç´ çæ ·å¼ï¼ä¾å¦ï¼æé®ã表ååæåççã大é¨ååç½ç«ç人é½ä¸æ¯ç¾å·¥åºèº«ï¼ååºèµå¿æ¦ç®çç½é¡µæ¯ä»¶å¾å°é¾çäºæ ï¼cssæä¾çæ ·å¼å¾ä¸ä¸å¾ç²¾ç¾ï¼è½è®©æ们轻æ¾å¼ååºä¸å¥ç²¾ç¾çç½ç«
Cssç»ä»¶ï¼Bootstrapè¿æä¾ä¸äºå¸¸ç¨çcssç»ä»¶ï¼åæ ·å¾ä¼ç§å¾æ£ã
Javascriptæ件ï¼Bootstrapæ¯ä¸ªå¼æ¾çç³»ç»ï¼æ们å¯ä»¥éææ©å±Bootstrapï¼ç¹å«æ¯javascriptçæ¡æ¶ï¼è¿æ ·Bootstrapå°±ä¼æ´å ä¸ä¸ã
ããBootstrapæ¯ä¸ªæä½æ§è´¨çæ¡æ¶ï¼æ²¡å¿ è¦åæ·±å ¥åæï¼æå ³é®æ¯æ没æ好ç使ç¨å®ä¾ï¼æä¸è½½Bootstrapåç°ï¼ä¸è½½å éçexampleä¸æ¯å¤ªå¼ºå¤§ï¼ä¾åé½å¨å®çå®ç½ä¸ï¼å¾å¤å¯¹cssåjavascriptä¸æ¯ç¹å«çæç人使ç¨èµ·æ¥é½ä¸å¤ªä¹ æ¯ï¼å æ¤æå°è¿äºä¾åè¿è¡äºæ´åï¼ä½ä¸ºåç¬çä¾åå·¥ç¨ï¼è¿ä¸ªå·¥ç¨éå¸¸å ¨é¢ï¼æå¨ç½ä¸æ¾è¿ï¼ç®åè¿æ²¡ææ¯ææ´ççæ´è¯¦å°½çä¾åï¼å¤§ä¼ä¸è½½ä¸æ¥æç §æçå·¥ç¨ç®å½ç»æå°±å¯ä»¥è¿è¡å¼åäºã
ããBootstrapæ¡æ¶å±äºUIæ¡æ¶ï¼è¿ä¸ªåjQueryä¸å¤ªä¸æ ·ï¼å ¶å®åç¡®çæè¿°Bootstrapæ¡æ¶å±äºcssæ¡æ¶èéjavascriptæ¡æ¶ï¼ä½æ¯å®æ¬èº«ä¹ä½¿ç¨javascriptæ¥å®åBootstrapæ¡æ¶çè§è§ææãæ¤å¤ï¼Bootstrapæ¡æ¶ååè¶ åï¼å¨æ¯æhtml5åcss3çæµè§å¨ä¸è¡¨ç°ç¹å«å¥½ï¼èä¸å¯¹ç§»å¨ç»ç«¯çæµè§å¨æ¯æä¹æ¯ç¸å½ä¼ç§ã
ããä¸ä¸ªå®æ´çBootstrapæ¡æ¶å å«å¦ä¸å个é¨åï¼
èææ¶ï¼ä¸ç¥éå®ç½ä¸ºå¥è¿ä¹ç¿»è¯ï¼ï¼ç¨äºéç½®èæ¯ãé¾æ¥æ ·å¼ãæ æ ¼ç³»ç»çï¼å¹¶å å«ä¸¤ä¸ªç®åçå¸å±ç»æãBootstrapçæ ·å¼ä½¿ç¨äºlesscssææ¯ï¼æ¯å¦éç½®èæ¯è¿æ ·çæä½ï¼è¿äºæ¯è¾ç®åæå°±ä¸å±å¼åè¿°äºï¼èææ¶éæåºå½©çæ¯æ æ ¼ç³»ç»åå¸å±ãæ æ ¼ç³»ç»æ¯å°é¡µé¢å®½åº¦åæ12åï¼æ æ ¼ç³»ç»å为两ç§ç±»åï¼ä¸ç§æ¯é»è®¤æ æ ¼ç³»ç»ï¼è¿æ¶åæ æ ¼ç³»ç»æ¯æ940pxåç´ è¿è¡çåï¼æ们å¯ä»¥ä½¿ç¨span1ï¼span4è¿æ ·çclasså±æ§æä½é»è®¤æ æ ¼å¸å±ï¼å¦ä¸ç§æ¯æµå¼æ æ ¼ç³»ç»ï¼è¿ä¸ªæ¶åååç宽度就ä¸æ¯åºå®ï¼èæ¯æ ¹æ®ä½ å¯è§é¡µé¢è¿è¡12çåï¼åæ ·å¯ä»¥ä½¿ç¨span1ï¼span4æä½æµå¼æ æ ¼ãè¿ä¸ªç³»ç»é常ä¹å¥½ï¼åcssæé¾çå°±æ¯divå¸å±ï¼ä½¿ç¨æ æ ¼ç³»ç»å¯ä»¥å¤§å¤§ç®ådivçå¸å±æä½ãå¦å¤ä¸ä¸ªå°±æ¯åå¸å±æä½äºï¼å¸å±ä¹å为åºå®åæµå¼ï¼è®©ä¸å¤ªç²¾écsså¸å±ä¹è½è½»æ¾æä½å¸å±ã
åºæ¬çcssæ ·å¼ãBootstrapç»åºäºä¸æ ·å¸¸ç¨çHTMLå ç´ çæ ·å¼ï¼ä¾å¦ï¼æé®ã表ååæåççã大é¨ååç½ç«ç人é½ä¸æ¯ç¾å·¥åºèº«ï¼ååºèµå¿æ¦ç®çç½é¡µæ¯ä»¶å¾å°é¾çäºæ ï¼cssæä¾çæ ·å¼å¾ä¸ä¸å¾ç²¾ç¾ï¼è½è®©æ们轻æ¾å¼ååºä¸å¥ç²¾ç¾çç½ç«
Cssç»ä»¶ï¼Bootstrapè¿æä¾ä¸äºå¸¸ç¨çcssç»ä»¶ï¼åæ ·å¾ä¼ç§å¾æ£ã
Javascriptæ件ï¼Bootstrapæ¯ä¸ªå¼æ¾çç³»ç»ï¼æ们å¯ä»¥éææ©å±Bootstrapï¼ç¹å«æ¯javascriptçæ¡æ¶ï¼è¿æ ·Bootstrapå°±ä¼æ´å ä¸ä¸ã
ããBootstrapæ¯ä¸ªæä½æ§è´¨çæ¡æ¶ï¼æ²¡å¿ è¦åæ·±å ¥åæï¼æå ³é®æ¯æ没æ好ç使ç¨å®ä¾ï¼æä¸è½½Bootstrapåç°ï¼ä¸è½½å éçexampleä¸æ¯å¤ªå¼ºå¤§ï¼ä¾åé½å¨å®çå®ç½ä¸ï¼å¾å¤å¯¹cssåjavascriptä¸æ¯ç¹å«çæç人使ç¨èµ·æ¥é½ä¸å¤ªä¹ æ¯ï¼å æ¤æå°è¿äºä¾åè¿è¡äºæ´åï¼ä½ä¸ºåç¬çä¾åå·¥ç¨ï¼è¿ä¸ªå·¥ç¨éå¸¸å ¨é¢ï¼æå¨ç½ä¸æ¾è¿ï¼ç®åè¿æ²¡ææ¯ææ´ççæ´è¯¦å°½çä¾åï¼å¤§ä¼ä¸è½½ä¸æ¥æç §æçå·¥ç¨ç®å½ç»æå°±å¯ä»¥è¿è¡å¼åäºã
温馨提示:答案为网友推荐,仅供参考
第1个回答 2018-03-22
首先要进入官网,我们直接百度bootstrap,看得有个中文网,进入就可以了,或者看下图地址栏输入。
单击页面上的下载按钮,进入如下模块中,我们能够看到能够下载的安装包。
这里往下拉,它有非常多的安装方式,这里我们就选择第一个就好了,单击“下载Bootstrap”按钮进入下载。
进入下载文件夹进行解压,这里我们可以看得解压后文件夹中所包含的文件。我们所需要知道的是,css是样式文件夹,里面包含了所有构造样式类,js是基于jQuery的行为文件夹,在引入js文件前需要先引入jQuery的js文件,font用于存储图标。
现在我们创建一个新项目。将框架目录放到文件夹下面。然后创建一个html的文件作为页面容器。
现在我们需要将需要的文件引入,具体如图所示。
为了兼容手机端,还需要添加一条
<meta name="viewpor" content="width=device-width,initial-scale=1.0">
我们可以打开浏览器查看添加了框架和没有添加框架的具体效果。在这里全部都是优秀的使用Bootstrap框架的页面,我们可以进行参考。
第2个回答 2016-07-27
Bootstrap 是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 首先,人们发现 Bootstrap 框架超棒,于是开始使用,然后非常的恼火...