{"id":30644,"date":"2021-09-01T23:06:27","date_gmt":"2021-09-01T15:06:27","guid":{"rendered":"https:\/\/web4theme.com\/?p=30644"},"modified":"2021-09-01T23:08:12","modified_gmt":"2021-09-01T15:08:12","slug":"%e5%85%8d%e8%b2%bb%e9%96%8b%e7%99%bc%e6%a8%a1%e6%9d%bfbootstrap%e4%bb%8b%e7%b4%b9","status":"publish","type":"post","link":"https:\/\/web4theme.com\/?p=30644","title":{"rendered":"\u514d\u8cbb\u958b\u767c\u6a21\u677fBootstrap\u4ecb\u7d39"},"content":{"rendered":"\n

Bootstrap \u662f\u4e00\u500b\u63d0\u4f9b\u5feb\u901f\u958b\u767c Web\u61c9\u7528\u7a0b\u5f0f\u548c\u7db2\u7ad9\u7684\u524d\u7aef\u6846\u67b6\uff0c\u5b83\u5df2\u7d93\u70ba\u4e0d\u540c\u8a2d\u5099\u505a\u4e86\u5f88\u591a\u9069\u914d\u7684\u5de5\u4f5c\uff0c\u60a8\u53ea\u8981\u6309\u5b83\u7684\u8981\u6c42\u7de8\u5bebhtml\u8207css\u5c31\u53ef\u4ee5\u81ea\u52d5\u9069\u61c9\u4e0d\u540c\u8a2d\u8a08\uff0c\u5c31\u662f\u6211\u5011\u5e38\u5e38\u8aaa\u7684responsive webdesign\u6216\u8005\u81ea\u9069\u61c9\u7db2\u9801\u8a2d\u8a08\u3002<\/p>\n\n\n\n

\u5728\u73fe\u4ee3 Web \u958b\u767c\u4e2d\uff0c\u6709\u4e00\u4e9b\u6240\u6709\u7684 Web \u9805\u76ee\u4e2d\u90fd\u9700\u8981\u7684\u529f\u80fd\uff0c\u6216\u8005\u7a31\u70ba\u7d44\u4ef6\/\u6a21\u584a\u3002
Bootstrap \u70ba\u60a8\u63d0\u4f9b\u4e86\u6240\u6709\u9019\u4e9b\u57fa\u672c\u7684\u7d44\u4ef6 – \u7db2\u683c\uff08Grid\uff09\u3001\u6392\u7248\uff08Typography\uff09\u3001\uff08\u8868\u683c\uff09Tables\u3001\uff08\u8868\u55ae\uff09Forms\u3001\uff08\u6309\u9215\uff09Buttons \u548c \uff08\u81ea\u9069\u61c9\uff09Responsiveness\u3002
\u6b64\u5916\uff0c\u9084\u6709\u5927\u91cf\u5176\u4ed6\u80fd\u5920\u5fa9\u7528\u7684\u524d\u7aef\u7d44\u4ef6\uff0c\u6bd4\u5982\uff08\u4e0b\u62c9\u6846\uff09Dropdowns\u3001\uff08\u5c0e\u822a\u6b04\uff09Navigation\u3001\uff08\u6a21\u614b\u5f48\u51fa\u6846\uff09Modals\u3001\uff08\u5b57\u6a21\uff09Typehead\u3001\uff08\u5206\u9801\uff09Pagination\u3001\uff08\u8f2a\u64ad\u5716\u7247\uff09Carousal\u3001\uff08\u9eb5\u5305\u5c51\uff09Breadcrumb\u3001\uff08\u6a19\u7c64\u584a\uff09Tab\u3001\uff08\u7e2e\u7565\u5716\uff09Thumbnails\u3001\uff08\u5927\u6a19\u984c\uff09Headers \u7b49\u7b49\u3002
\u6709\u4e86\u9019\u4e9b\uff0c\u4f60\u53ef\u4ee5\u642d\u5efa\u4e00\u500b Web \u9805\u76ee\uff0c\u4e26\u8b93\u5b83\u904b\u884c\u5730\u66f4\u5feb\u901f\u66f4\u8f15\u9b06\u3002
\u6b64\u5916\uff0c\u7531\u65bc\u6574\u500b\u6846\u67b6\u662f\u57fa\u65bc\u6a21\u584a\u7684\uff0c\u60a8\u53ef\u4ee5\u901a\u904e\u60a8\u81ea\u5df1\u7684 CSS \u4f4d\uff0c\u751a\u81f3\u662f\u9805\u76ee\u958b\u59cb\u5f8c\u7684\u4e00\u500b\u5927\u6574\u6539\uff0c\u4f86\u9032\u884c\u81ea\u5b9a\u7fa9\u3002<\/p>\n\n\n\n

\u4e0a\u8ff0\u8aaa\u660e\u592a\u5b98\u65b9\uff0c\u4e00\u822c\u4eba\u4e0d\u597d\u7406\u89e3\uff0c\u6211\u4f86\u7c21\u5316\u4e00\u4e0b\uff1a
Bootstrap\u662f\u4e00\u500b\u505a\u7db2\u9801\u8a2d\u8a08\u7684\u6846\u67b6\uff08\u76ee\u524d\u6700\u6d41\u884c\u7684WEB\u524d\u7aef\u6846\u67b6\u4e4b\u4e00\uff09\uff0c\u5c31\u662f\u8aaa\u4f60\u53ea\u9700\u8981\u5bebHTML\u6a19\u7c64\u8abf\u7528\u5b83\u7684\u985e\uff08class\uff09\u4f60\u5c31\u53ef\u4ee5\u5f88\u5feb\u901f\u7684\u505a\u4e00\u500b\u7cbe\u7f8e\u5be6\u7528\u7684\u7db2\u9801\uff0c\u4f60\u4e0d\u7528\u64d4\u5fc3\u4e0d\u540c\u8a2d\u5099\u7684\u517c\u5bb9\u554f\u984c\uff0c\u63d0\u4f9b\u4e86\u5f88\u591a\u6a23\u5f0f\u4f9b\u4f60\u9078\u64c7\uff01
\u6bd4\u5982\u4f60\u9700\u8981\u505a\u4e00\u500b\u7db2\u7ad9\u7684\u6587\u672c\u986f\u793a\uff0c\u4f60\u81ea\u5df1\u5beb\u7684\u8a71\u4f60\u9700\u8981\u5beb\u5f88\u591a\u4ee3\u78bc\uff0c\u4f46\u662f\u5982\u679c\u4f60\u4f7f\u7528bootstrap\u6846\u67b6\u4f86\u5beb\u7684\u8a71\uff0c\u53ea\u9700\u8981\u5beb\u597dHTML\u6a19\u7c64\u7136\u5f8c\u8abf\u7528\u985e\u540d\u5c31\u53ef\u4ee5\u4e86\uff01
\u4ee3\u78bc\u5c55\u793a\u5982\u4e0b\uff1a<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <meta charset=\"utf-8\">\n    <title>Bootstrap \u5165\u9580\u5be6\u4f8b<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.staticfile.org\/twitter-bootstrap\/3.3.7\/css\/bootstrap.min.css\">\n    <script src=\"https:\/\/cdn.staticfile.org\/jquery\/2.1.1\/jquery.min.js\"><\/script>\n    <script src=\"https:\/\/cdn.staticfile.org\/twitter-bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\n<\/head>\n\n<body>\n    <div class=\"container\">\n        <div class=\"starter-template\">\n            <h1>\u7db2\u9801\u8a2d\u8a08\u7bc4\u4f8b<\/h1>\n            <p class=\"lead\">Use this document as a way to quickly start any new project.<br> All you get is this text\n                and a mostly barebones HTML document.<\/p>\n        <\/div>\n        <small>\u672c\u884c\u5167\u5bb9\u662f\u5728\u6a19\u7c64\u5167<\/small><br>\n        <strong>\u672c\u884c\u5167\u5bb9\u662f\u5728\u6a19\u7c64\u5167<\/strong><br>\n        <em>\u672c\u884c\u5167\u5bb9\u662f\u5728\u6a19\u7c64\u5167\uff0c\u4e26\u5448\u73fe\u70ba\u659c\u9ad4<\/em><br>\n        <p class=\"text-left\">\u5411\u5de6\u5c0d\u9f4a\u6587\u672c<\/p>\n        <p class=\"text-center\">\u5c45\u4e2d\u5c0d\u9f4a\u6587\u672c<\/p>\n        <p class=\"text-right\">\u5411\u53f3\u5c0d\u9f4a\u6587\u672c<\/p>\n        <p class=\"text-muted\">\u672c\u884c\u5167\u5bb9\u662f\u6e1b\u5f31\u7684<\/p>\n        <p class=\"text-primary\">\u672c\u884c\u5167\u5bb9\u5e36\u6709\u4e00\u500b primary class<\/p>\n        <p class=\"text-success\">\u672c\u884c\u5167\u5bb9\u5e36\u6709\u4e00\u500b success class<\/p>\n        <p class=\"text-info\">\u672c\u884c\u5167\u5bb9\u5e36\u6709\u4e00\u500b info class<\/p>\n        <p class=\"text-warning\">\u672c\u884c\u5167\u5bb9\u5e36\u6709\u4e00\u500b warning class<\/p>\n        <p class=\"text-danger\">\u672c\u884c\u5167\u5bb9\u5e36\u6709\u4e00\u500b danger class<\/p>\n    <\/div>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
\n